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Ce livre s'adresse a des lecteurs avertis qui souhaitent decouvrir ce qui se cache derriere le terme tres mediatise d'AJAX et ce qu'apporte 
cette nouvelle methode de conception de sites Web. II sera egalement tres utile aux developpeurs professionnels pour leur donner une 
perception globale d'AJAX avant qu'ils n'abordent les kits de developpement (framework) utilises dans leur environnement de travail habituel. II 
suppose des connaissances prealables en XHTML et CSS. Son objectif est d'expliquer de fagon simple et neanmoins precise, les divers 
composants d'AJAX et de montrer comment leur utilisation conjointe peut aboutir a des applications Web novatrices. Apres une presentation 
generale d'AJAX, I'auteur detaille JavaScript (notions fondamentales, fonctions et methodes, conditions et boucles, gestionnaire 
d'evenements, formulaires, manipulation des chames de caracteres, tableaux...), le XML (presentation, syntaxe ...), les XSL, le DOM 
(presentation, les nceuds, I'acces aux objets, aux attributs...), I'objet XMLHttpRequest (presentation, proprietes et methodes...). Les deux 
derniers chapitres proposent la mise en application des composants etudies dans les chapitres precedents pour realiser de I'AJAX ainsi que 
des exemples de developpements. Cet ouvrage est ecrit dans un style concis et precis avec de nombreux exemples significatifs et 
illustrations pour donner au lecteur une vision juste des possibilites d'AJAX. Les exemples de code utilises dans I'ouvrage sont en 
telechargement sur le site de I'editeur. 



Depuis les debuts d'lnternet, Luc Van Lancker, enthousiasme par I'idee de communication universelle que vehicule ce concept, s'investit 
completement dans ce domaine. Apres le HTML, le XHTML, les CSS, il etait naturel qu'il se passionne aujourd'hui pour I'AJAX. Formateur 
experiments et grand pedagogue, il a su transmettre au lecteur toute sa passion pour cette nouvelle technologie. 

Ce livre numerique a ete congu et est diffuse dans le respect des droits d'auteur. Toutes les marques citees ont ete deposees par leur editeur respectif. La lot du 1 1 
Mars 1957 n'autorisant aux termes des alineas 2 et3de I' article 41, d'une part, que les "copies ou reproductions strictement reservees a I'usage prive du copiste et non 
destinees a une utilisation collective", et, d'autre part, que les analyses et les courtes citations dans un but d'exemple et d'illustration, "toute representation ou 
reproduction integrate, ou partielle, faite sans le consentement de I'auteur ou de ses ayants droit ou ayant cause, est illicite" (alinea ler de I'article 40). Cette 
representation ou reproduction, par quelque procede que ce soit, constituerait done une contrefagon sanctionnee par les articles 425 et suivants du Code Penal. 
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Principe et definition 



Le terme Ajax est apparu pour la premiere fois le 18 fevrier 2005, dans un essai de James Garret intitule "Ajax : une 
nouvelle approche pour les applications Web". 

AJAX est un acronyme d'Asynchonous JavaScript And XML (JavaScript et XML asynchrone) qui designe une approche 
innovante dans la conception de pages Web dont I'objectif est d'optimiser leur interactivity et leur confort d'utilisation. 

AJAX n'est pas une technologie nouvelle, c'est un terme synthetique qui designe I'utilisation conjointe dans les pages 
Web de differentes technologies. Ainsi AJAX incorpore : 

• le Xhtml et les feuilles de style CSS ; 

• le JavaScript ; 



• le Document Object Model (DOM) ; 



• I'objet XMLHttpRequest ; 



• le XML et le XSL. 




'^T' XHTML & CSS 

Le Xhtml et les feuilles de style CSS prennent en charge la presentation des pages de fagon standardisee. 

Le JavaScript, qui marque ainsi son grand retour dans I'univers de la publication sur le web, est omnipresent dans les 
applications AJAX. 

Les objets du document sont pris en charge selon le Document Object Model (le DOM) du consortium W3C. 

L'objet XMLHttpRequest permet de lancer des requetes de la page Web vers le serveur pour y recuperer des fichiers. 
Son fonctionnement permet d'effectuer ces requetes de fagon asynchrone, soit en arriere-plan de la page et de fagon 
completement transparente pour I'utilisateur. 

Les fichiers recuperes sont au format XML, les apports de ce format dans le domaine de I'echange des donnees n'est 
plus a presenter. 

II s'agit done de techniques, du JavaScript au XML en passant par le DOM et l'objet XMLHttpRequest qui sont eprouvees, 
standardises et maitrisees. Ce qui est assez prometteur quant a la compatibility d'AJAX avec les navigateurs 
actuellement utilises sur le Web. 

Mais c'est dans I'utilisation conjointe de ces differentes technologies que reside I'originalite du fonctionnement d'AJAX 
que nous appellerons par la suite, le modele AJAX. 
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Ce modele AJAX se decompose comme suit : 

• La page Web s'affiche, comme a I'accoutume, dans le navigateur, appele aussi le client. 



• La moindre interaction de I'utilisateur, par exemple I'encodage d'un formulaire ou le cliquer/deplacer d'un 
element, est prise en charge par la gestion des evenements de JavaScript. 

• Le code JavaScript de la page initie une requete XMLHttpRequest vers un fichier XML situe sur le serveur. 

• Le fichier XML reclame, est renvoye vers le navigateur de I'utilisateur. 

• II est alors pris en charge par le DOM, et toujours par le JavaScript, pour etre traite et affiche de fagon 
dynamique dans la page initiale. 

Toute cette procedure s'est deroulee de fagon transparente pour I'utilisateur, sans necessiter le rechargement fastidieux 
de la page. 

Le modele AJAX permet ainsi de sortir du schema traditionnel de la conception de pages Web qui necessitait que chaque 
nouvelle information reclame une nouvelle page. 



3 Traditionel ... (TJOS 
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Avec AJAX, une nouvelle information peut etre recuperee dans un petit fichier situe sur le serveur. Ce fragment 
d'information peut alors etre pris en charge et affiche dans une zone de la page et completer ainsi la page initiale. 

En evitant I'actualisation de la page et la perte de temps que cela entraine, les applications gagnent ainsi en fluidite. En 
outre I'ergonomie s'en trouve amelioree car I'utilisateur peut rester concentre sur la lecture de la page ou la tache 
accomplie. 
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Le schema traditionnel de la relation client-serveur, mis en place des les origines du Web par la caracteristique 
hypertexte des pages Web, est ainsi mis en question. Selon celui-ci, la plupart des interactions de I'utilisateur comme le 
die sur un lien ou I'envoi d'un formulaire, declenchent une requete HTTP vers le serveur Web. Ce dernier, apres le 
traitement eventuel des donnees, retourne une nouvelle page Html ou Xhtml au client. 

La session de I'utilisateur est alors une succession de requetes HTTP et de reponses du serveur. Cet aller-retour 
incessant du client vers le serveur affiche a chaque fois une nouvelle page dans le navigateur. 

Avec le schema AJAX, la page Web initiale comprend une part importante de code AJAX qui permet, soit de prendre en 
charge une serie d'operations comme la validation de formulaires, soit d'initier des requetes XMLHTTPRequest pour toutes 
informations complementaires necessaires. Les donnees ainsi retournees viennent s'incorporer de facon asynchrone 
dans la page initiale en apportant une facilite d'utilisation et une reactivite inconnues a ce jour sur la toile. 



Le schema traditionnel 
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La puissance du concept AJAX est telle que Ton peut envisager des applications Web qui se rapprochent des applications 
logicielles, appelees aussi applications de bureau. Ce qui modifie completement la richesse de I'interface et la potentialite 
des services des pages Web. 

Mais I'enjeu d'AJAX va plus loin que ces considerations techniques. Son fonctionnement reactif permet de reconsiderer 
totalement I'ergonomie des sites Web. Alors que pendant pres d'une decennie, la realisation de sites plaisants a I'oeil 
etait d'actualite, a present la conception de sites plaisants a etre utilises est envisageable. L'utilisateur devient ainsi 
I'element central des preoccupations des developpeurs. 

La definition d'AJAX n'est cependant pas a prendre a la lettre. L'approche AJAX est dans la pratique plus souple. 
Soulignons par exemple, que I'objet XMLHttpRequest permet de recuperer, non seulement des fichiers XML, mais aussi de 
simples fichiers de texte (au sens informatique du terme). Cette caracteristique elargit considerablement le champ des 
possibilites offertes aux developpeurs. 

Le concept AJAX est mis en avant et soutenu par Google. De nombreuses applications signees Google en reprennent 
l'approche. On songe ainsi a Google Maps et Google Suggest que nous allons aborder au point suivant. II met egalement 
a la disposition des concepteurs un kit de developpement (en open source). Le fait qu'une figure emblematique du Web 
comme Google s'investisse ainsi dans les applications AJAX, ne peut que susciter ou renforcer I'interet des developpeurs 
de sites Web. 
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Exemples sur le Web 



1. Google Maps 

Google Maps est un service en ligne (gratuit) de cartes geographiques, calcul d'itineraires et de vues satellites. 

Ce site permet, a partir de I'echelle d'un continent ou d'un pays, de zoomer par un double die ou par I'utilisation de la 
roulette de la souris, jusqu'a I'echelle d'une rue. On peut aussi basculer d'un simple die, de la carte classique avec le 
nom des rues, des quartiers et des villes a des images satellites de la meme localisation. 

II peut etre consulte, dans sa version frangaise, a I'adresse http://maps.google.fr/. 
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En quoi le site Google Maps reprend-il I'approche AJAX ? 

II faut d'abord savoir qu'une carte est divisee en petits carres. Pour les cartes classiques, ces petits morceaux au 
format PNG, ont une dimension de 256 x 256 pixels, et un nombre de couleurs limite a 256. Ce qui en fait des fichiers 
de taille reduite et ce qui implique un temps de transfert tres faible. 
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Lorsque I'utilisateur deplace la carte dans un sens, par le simple glissement du curseur de la souris, cette action est 
prise en charge par le JavaScript. Celui-ci recupere la longitude, la latitude et I'intensite du zoom des carres qui devront 
etre devoiles. L'objet XMLHttpRequest envoie une requete vers le serveur pour reclamer les petites images 
manquantes. A la reception, le DOM se chargera de les afficher dynamiquement a I'endroit adequat, parfaitement 
alignees les unes avec les autres. 

Toute cette operation se fait sans rechargement de la page, sans modification de I'adresse de la page, sans apparition 
de la barre d'avancement du telechargement dans la barre d'etat et sans reclamer I'installation d'un plug-in specifique ! 



2. Google Suggest 

L'interface est proche de celle de la page d'accueil habituelle de Google. Cependant, cet outil suggere 
automatiquement une liste de 10 mots ou expressions qui se rapprochent de ce qui est encode dans la zone de texte 
consacree aux mots-cles. Cet outil affiche egalement en face de chacun des mots ou expressions, le nombre de 
resultats trouves dans la banque de donnees de Google. L'utilisateur peut ensuite effectuer une selection dans cette 
liste de suggestions et continuer sa recherche sur Google. 

A chaque encodage d'une lettre, cette liste de 10 expressions est recreee et affichee de fagon dynamique. 
Ce site en version beta est consumable a I'adresse labs.google.com/suggest/. 
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La vitesse de fonctionnement est assez surprenante. En effet, Google Suggest dialogue avec les serveurs de Google 
pendant que I'internaute tape sa requete et met a jour I'affichage de fagon quasi instantanee, et toujours sans 
necessiter un rafraichissement de la page. 

Le fonctionnement d'AJAX dans cette application peut etre decompose comme suit : 

• L'encodage dans la zone de texte est recupere par JavaScript. 

• Une requete XMLHttpRequest est initiee avec la valeur de l'encodage comme parametre (ici le mot ajax). 

• Le serveur retourne les informations demandees sous forme de deux tableaux (Array) Javascript : new Array 
("ajax tutorial", "ajax tutorials", "ajax examples", "ajaxian", "ajax framework", "ajax php", "ajax 
example", "ajax4jsf", "ajax asp.net", "ajax amsterdam"), new array ( "25, 800, 000 results", "51,400,000 
results", "3,790,000 results", "2,230,000 results", "33,900,000 results", "138,000,000 results", 
"17,800,000 results", "199,000 results", "9,170,000 results", "3,530,000 results" ). 

• Le DOM entre alors en action pour creer une liste deroulante de 10 lignes. JavaScript se charge quant a lui de 
repartir les donnees du tableau Array dans chaque ligne. 

Nous proposons dans le chapitre Ajax par I'exemple, un exemple appele "Une suggestion d'encodage" qui s'inspire 
largement de la fagon de proceder de Google Suggest. 
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3. Google Agenda 



Google Agenda, comme son nom I'indique, permet de gerer votre emploi du temps en toute simplicite, de fagon tres 
conviviale et coloree. Encoder des evenements, modifier votre planning d'un simple cliquer/glisser de la souris, partager 
(avec votre permission) votre agenda, de disposer de rappels d'evenements par un e-mail, par une fenetre pop-up ou 
par un message sur votre telephone portable, voici quelques- unes des fonctionnalites, tres variees, de Google 
Agenda. 



Une demonstration de ce nouveau service 
http://www.google.com/intl/fr/googlecalendar/tour.html. 



en ligne est disponible 



I'adresse 



Le service en lui-meme est accessible a partir de la page d'accueil de Google et necessite I'ouverture (gratuite) d'un 
compte. 
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Le nombre important de fonctionnalites de Google Agenda illustre bien la richesse des applications AJAX : celles-ci 
permettent de mettre en place des sites qui n'ont plus rien a envier aux applications logicielles. 



4. Google Document et Tableur 



Creer, editer, ou encore partager des documents demande toujours ('installation sur notre systeme d'un logiciel, en 
general Microsoft Office ou OpenOffice. Et si on pouvait faire tout cela avec seulement un navigateur Web ? 

Google avec Document et Tableur, propose une solution tres allechante qui va nous permettre de disposer d'une 
application bureautique, accessible depuis n'importe quel poste relie a I'lnternet, sans aucune installation a effectuer. 
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Google Document et Tableur permet done de creer rapidement des documents, et surtout de les partager pour faciliter 
le travail collaboratif. 

Le tout peut etre enregistre au format Html, RTF, Word, OpenOffice et PDF. 

Et ce n'est pas seulement un traitement de texte qui est a votre disposition mais aussi un tableur, avec la mise en 
forme de formules, meme complexes ! 
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Des bruits circulent qu'un outil de presentation, du meme style que PowerPoint, de la suite bureautique Office de 
Microsoft, serait bientot disponible. 

Une visite guidee vous attend a I'adresse : 

http://www.google.com/google-d-s/intl/fr/tourl.html. 

Le service en lui-meme est accessible a partir de la page d'accueil de Google et necessite I'ouverture (gratuite) d'un 
compte. 
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Avantages et inconvenients 



II ne faut pas se laisser aveugler par I'effet AJAX. Tous les sites ne se preterit pas a cette approche. Surtout que 
developper un site en AJAX sera plus difficile et plus long que les methodes de publication utilisees a ce jour. Pour vous 
aider dans votre choix, voici quelques elements qui vous aideront a prendre la bonne decision. 



1. Avantages 

• AJAX, c'est principalement la revolution asynchrone I La technique qui consiste a charger en arriere-plan des 
elements de reponse aux interactions de I'utilisateur, est au cceur du modele AJAX. II est certain que le 
potentiel est enorme et qu'il n'est a ce jour a peine explore. Gageons que la creativite des developpeurs y 
trouvera un terrain ou elle pourra pleinement s'exprimer. 

• L'interface est plus reactive car seulement une petite partie est mise a jour, donnant ainsi I'impression a 
I'utilisateur que les changements se realisent instantannement. 

• Le temps d'attente de I'utilisateur est reduit car il n'est plus necessaire de recharger toute la page pour obtenir 
une nouvelle information. Les applications AJAX apportent ainsi une fluidite inhabituelle aux pages Web. 
Certains qualifient meme AJAX comme etant le Web des impatients. Je gage que certains lecteurs vont se 
reconnaitre... 

• Le temps de transfert entre le client et le serveur est considerablement reduit car il lui suffit de transferer les 
elements de la reponse au lieu d'envoyer toute la page avec des elements le plus souvent redondants. 

• Un site AJAX bien realise sera agreable d'utilisation pour le visiteur. Ce qui ne peut que valoriser en termes 
d'image la communication avec I'utilisateur. 

• La maintenance du site sera plus aisee car, grace a I'architecture mise en place par AJAX, il suffira de ne mettre 
a jour que des fichiers de taille reduite, parfois simplement en format texte. Cette mise a jour pourra meme 
etre confiee a des personnes dont les competences sont plus orientees bureautique que conception de sites 
Web. 



2. Inconvenients 

• Meme si Ajax utilise des composants connus comme le JavaScript, le XML, le DOM et I'objet XMLHttpRequest, 
son code est pointu et delicat a mettre en place. Le fait de developper une application AJAX peut augmenter 
sensiblement le temps de conception et done le cout. II est admis de fagon unanime qu'AJAX est plus difficile a 
mettre en place qu'une application Web classique a cause de I'utilisation conjointe des differentes 
technologies. 

• AJAX comporte beaucoup de JavaScript. Les utilisateurs qui ont desactive la prise en charge du JavaScript par 
leur navigateur, n'ont pas acces aux applications AJAX. On peut raisonnablement estimer que cette population 
est faible mais elle existe. 

• Le concept AJAX est oriente vers I'utilisateur. Cependant par divers aspects, il risque de desorienter I'utilisateur 
moyen. Comme certaines parties de la page ne correspondront plus a la page initiale, les fonctions de 
I'historique et de la mise en favoris du navigateur risquent de ne pas etre representatives de I'etat actuel de la 
page. De plus, cliquer sur le bouton Precedent du navigateur, peut n'avoir aucun effet puisque I'adresse de la 
page est restee inchangee. 

• L 'accessibility des applications AJAX avec les systemes de lecture d'ecran utilises par les personnes 
visuellement deficientes est assez problematique. Deja la prise en compte du JavaScript est tres partielle et 
souvent aleatoire. En outre, vient s'ajouter I'objet XMLHttpRequest qui modifie, en cours de lecture, le contenu 
de la page. Ainsi, au moins dans un premier temps, il importe de prevoir une page alternative pour les 
personnes ayant un handicap visuel. 

• Comme T'objet XMLHttpRequest peut envoyer des requetes du navigateur vers le serveur de fagon 
transparente pour I'utilisateur, certaines personnes s'inquietent quant au respect de la vie privee de 
I'internaute. On peut comprendre leur point de vue mais Internet est et restera un systeme ouvert dans toutes 
les implications du terme. La limitation de I'objet XMLHttpRequest qui ne peut envoyer ou recevoir des requetes 
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que vers le domaine du site Web qui contient la page, pourra (partiellement) les rassurer. 

II est difficile a I'heure actuelle (courant 2007) d'avoir un avis tranche en matiere de securite informatique des 
applications AJAX. Comme toujours lors de I'apparition d'une nouvelle technologie, des detracteurs se font 
entendre tandis que d'autres se veulent rassurant. II est un fait que le concept AJAX se base sur des 
composants connus et que seul le nombre de requites entre le navigateur et le serveur risque d'augmenter 
dans les applications AJAX. Pour le reste, il est simplement trop tot pour se prononcer. 

Le referencement des pages en AJAX n'est pas simple a realiser. Comme pour les sites en JavaScript et les 
pages en Flash, le referencement reclamera toutes les attentions du concepteur. L'indexation par les moteurs 
de recherche n'est pas moins problematique car avec le systeme AJAX, une meme page peut, selon les actions 
de I'internaute, avoir plusieurs contenus differents. 
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Evolution ou revolution 



S'il y a une question qui a alimente, et qui alimentera encore, les forums de discussion, c'est bien celle-la. Tentons de 
faire le point au sujet des arguments developpes. 



1. Evolution 

II est evident qu'AJAX est une fagon d'utiliser plusieurs technologies preexistantes. 

Le JavaScript, omnipresent dans AJAX, est ce vilain petit canard de la publication sur le Web. Invente en 1996 par 
Netscape, pauvrement normalise par le ECMAScript, avec ses bugs et ses incompatibility, il marque pourtant avec le 
concept AJAX son retour sur le devant de la scene. 

L'utilisation conjointe des feuilles de style CSS, du JavaScript et du DOM sur fond de page Html ou Xhtml n'est pas sans 
rappeler la definition du DHTML qui lui aussi pronait deja I'interactivite des pages Web. L'objet XMLHttpRequest ne fait 
qu'apporter au Dhtml la possibility de recuperer des donnees du serveur. 

Et en ce qui concerne l'objet XMLHttpRequest, il n'est pas recent lui non plus car il etait deja ete implante dans Internet 
Explorer 5.0 en 1999 et passa tout ce temps inapergu aupres des developpeurs. 

AJAX et le Web 2.0 ne seraient alors qu'une evolution naturelle de ce formidable outil qu'est la Web apres 15 annees 
d'existence. Et le Web, qui s'est implante dans la vie quotidienne, connaitra encore bien des evolutions ou des 
mutations. 



2. Revolution 

Pourtant on ne peut que s'etonner, au-dela du battage mediatique, du formidable mouvement de synergie cree autour 
de I'approche AJAX par les professionnels du Web et d'Internet. La mise en place en fevrier 2006 de OpenAJAX Alliance, 
consortium de firmes reputees comme Adobe, Backbase, BEA, DoJo Foundation, Eclipse Foundation, Google, IBM, 
Novell, Oracle, SAP et Red Hat pour promouvoir la technologie AJAX en est une preuve. 

A la vue des exemples presentes lors du present chapitre, il faut bien admettre que la mutation des pages Web 
traditionnelles en veritables plates-formes applicatives va modifier, de fagon significative, les usages de la toile. Avec la 
richesse des interfaces, avec la multiplication des fonctionnalites, avec les avancees de I'ergonomie et de I'usabilite des 
sites, c'est assurement une nouvelle fagon de naviguer qui s'instaure. 

La veritable nouveaute d'AJAX ne reside pas tant dans son aspect technologique mais bien dans la nouvelle strategie 
mise en place. C'est la premiere fois depuis I'apparition du Web que I'utilisateur, ou autrement dit le consommateur, est 
place au centre des preoccupations des developpeurs. Ajax permet la conception de sites reactifs, ergonomiques, 
intuitifs, axes sur le consommateur du Web et ses nouvelles attentes d'utilisation du Web. 
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Pre-requis 

L'objectif de cet ouvrage, apres avoir parcouru les elements necessaires, est de faire percevoir au lecteur le 
fonctionnement concret et les enormes potentialites des applications AJAX. 

Force est de constater apres la lecture du chapitre Presentation generale d'AJAX que du Xhtml en passant par les feuilles 
de style CSS, le JavaScript, le XML, le DOM et I'objet xmiHttpRequest, les differentes technologies ne manquent pas. 

Afin d'eviter de proposer une encyclopedie de la conception de pages Web, il semble judicieux de limiter les matieres 
abordees dans ce livre. A ce stade de I'interet du lecteur pour les nouvelles perspectives de la publication sur le Net, il 
parait raisonnable de penser que celui-ci possede deja des notions basiques ou avancees du langage Html ou Xhtml 
ainsi que des feuilles de style CSS. 

AJAX met en ceuvre, a travers differents composants comme le DOM et I'objet XmiHttpRequest, un code pointu et a priori 
complexe qui reclamera toute votre attention. Une certaine aisance dans le langage Html et les feuilles de style CSS ne 
peut que faciliter I'etude du lecteur. 

Pour parfaire vos connaissances sur le Xhtml et les feuilles de style CSS, vous pouvez vous reporter a I'ouvrage "XHTML 
1 et CSS 1 et 2.1 - Les nouveaux standards du Web" aux Editions ENI - Ressources Informatiques du meme auteur. 



C\ La connaissance de langage Html ou Xhtml et des feuilles de style CSS est un pre-requis indispensable a une 
v etude fructueuse de cet ouvrage consacre a AJAX. 



Tous les exemples du livre sont ecrits en Xhtml 1.0 de type transitional. 
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Limites de ce livre 



La lecture du chapitre Presentation generale d'AJAX a fait decouvrir que I'approche AJAX permettait de traiter dans le 
navigateur de I'utilisateur (application cote-client) des fichiers externes a la page, presents sur le serveur (application 
cote-serveur). 

Les donnees de ces fichiers externes peuvent etre traitees par des langages de programmation comme par exemple, le 
PHP et I'ASP. Ce qui elargit encore, et de fagon considerable, les competences reclamees pour produire des pages Web 
en AJAX. A ce niveau, la frontiere entre le lecteur averti et le professionnel nous semble franchie. 

Ainsi, nous limiterons I'etude de cet ouvrage sur AJAX a des applications cote-client qui recupereront des fichiers 
externes, au format XML ou texte, et qui les afficheront de fagon asynchrone dans la page Web. 

Par ailleurs, la vague d'interet suscitee par AJAX fait fleurir de nombreux assistants logiciels a la production d'applications 
AJAX, appeles frameworks, qui exploitent certains aspects repetitifs du code mis en place par celui-ci. La aussi, il s'agit 
d'outils professionnels qui ne seront pas abordes ici. 
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Outils cote-client 



1. Un navigateur Internet Explorer 7 ou 6 et Firefox 

Au moment de I'ecriture et de I'edition de cet ouvrage (courant 2007), il est raisonnable de se concentrer sur les trois 
navigateurs que sont Internet Explorer 6, Internet Explorer 7 et Firefox dans sa version 2.0. 

Le vieillissant Internet Explorer 6, bien que conteste pour ses problemes de securite et son fonctionnement particulier 
dans certains domaines des feuilles de style CSS, est encore present sur de nombreuses machines. 

La toute derniere version Internet Explorer 7, presente dans Microsoft Vista et disponible pour Microsoft XP SP2, 
suscite a ce jour un interet certain. D'autant que, proposee par le systeme de mises a jour automatiques de Microsoft, 
sa diffusion devrait etre plus rapide que celle des versions anterieures d'Internet Explorer. Meme s'il n'apporte pas de 
grandes innovations au niveau du code, on peut deja mettre en avant une approche differente de I'objet 
xmiHttpRequest qui sera detaillee au chapitre L'objet XmlHttpRequest consacre a ce sujet. 



C\ Pour les lecteurs qui ont deja adopte Internet Explorer 7.0 et qui souhaiteraient neanmoins tester leur code 
" sous Internet Explorer 6.0, Ryan Parman de Skyzyx.com a regroupe le fichier iexplore.exe avec les fichiers du 
noyau du navigateur pour chacune des versions d'Internet Explorer. Ces versions autonomes (standalone) d'Internet 
Explorer 5.0, 5.5 et 6.0 sont disponibles sur sa page de telechargement : http://www.skyzyx.com/downloads/ 



L'incontournable navigateur Firefox ne fait qu'accroitre sa part de marche. II n'est plus a presenter aux developpeurs 
pour son respect rigoureux des standards edites par le W3C et ses nombreuses extensions. 

II existe bien entendu d'autres navigateurs de qualite que nous ne pouvons aborder dans le cadre de ce livre. 



2. Un editeur de texte 

Les inities au Html et a ses langages connexes n'ignorent pas I'importance du code source et de son encodage 
(manuel) dans un editeur de texte. 

Pour la suite de notre etude, n'importe quel editeur de texte brut fera I'affaire. Pour les utilisateurs de Windows, 
I'utilisation du Bloc-notes (notepad) fera parfaitement I'affaire. 
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Outils cote-serveur 



Si pour I'etude du JavaScript, du XML et du DOM, soit respectivement les chapitres Le JavaScript, Introduction au XML et 
Introduction au XSL, un editeur de texte et votre navigateur suffiront largement, la suite du livre consacree a I'objet 
XmlHttpRequest et a Ajax (chapitres Le DOM (Document Object Model), L'objet XmlHttpRequest, L'approche AJAX et AJAX 
par I'exemple) necessite la mise en place d'un serveur Web local, aussi appele serveur Web personnel ou virtuel. 

Ce serveur local vous permettra de tester le code sans passer par la procedure contraignante de son telechargement 
par FTP sur votre espace perso, evitant ainsi de se connecter a un serveur externe. 



1. Le serveur local Microsoft IIS 

Le logiciel serveur Web IIS (Internet Information Services) est present sur le CD d'installation de Windows XP version 
Pro, Windows Vista et Windows Server 2003. 

■ L'installation d'HS est assez simple : Demarrer - Parametres - Panneau de configuration - Ajout/Suppression de 
programmes. 

■ Dans la fenetre d'ajout/suppression de programmes, activez Ajouter ou supprimer des composants de Windows. 



Assistant Composants de Windows 



Composants Windows 

Vous pouvez ajouter ou supprimer des composants de Windows XP 



Pour ajouter ou supprimer des composants, selectionnez la case a cocher 
correspondante. Une case grisee signifie que seule une partie du composant sera 
installee. Pour voir ce qui est inclus dans un composant, cliquez sur Details. 



Composants : 


0 g3 Services de mise en reseau 


0,3 Mo a 


□ ^Services de telecopie 


3,8 Mo 


□ *s Services Internet (IIS) 


13,4 Mo 


0 ^ Windows Messenger 


0,0 Mo 

V 



Description : Inclut une prise en charge Web et FTP, ainsi qu'une prise en charge de 
FrontPage, des transactions, des pages ASP et des connexions a des 
bases de donnees. 



Espace disque total necessaire : 55,8 Mo 

Espace disponible sur le disque : 25281 ,3 Mo 



< Precedent 


! Suivant > 




Annuler 



■ Cochez la case Services Internet (IIS) et allez dans Details... 
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Services Internet (IIS) 



Pour ajouter ou supprimer des composants, selectionnez la case a cocher 
correspondante. Une case grisee signifie que seule une partie du composant sera 
installee. Pour voir ce qui est inclus dans un composant, cliquez sur Details. 

Sous-composants de Services Internet (IIS) : 



V: ^Documentation 


3,5 Mo 


A 


□ ^Extensions serveur FrontPage 2000 


4,1 Mo 




0 <Q> Fichiers communs 


1,0 Mo 




0 0 Gestionnaire Web personnel 


1,4 Mo 




0 £j Serveur FTP (File Transfer Protocol) 


0,1 Mo 




@ g# Serveur World Wide Web 


1,9 Mo 




□ IS Service SMTP 


3.6 Mo 


V 



Description : Interface d'administration pour IIS. Cette interface s'affiche sous forme de 
composant logiciel enfichable au sein de Microsoft Management Console 
(MMC). 



Espace disque total necessaire : 0,8 Mo 

E space disponible sur le disque : 965,4 Mo 



Details.. 



OK 



Annuler 



Cliquez sur OK pour lancer Installation. Windows va vous demander le CD d'installation. 



Inserez un disque 



Veuillez inserer le CD appele 'CD du Service Pack 2 
i pour Windows XP Professionnel' dans votre lecteur de 
CD-ROM(E:)puiscliquezsurOK. 

Vous pouvez aussi cliquer sur OK si vous voulez que 
des fichiers soient copies d'un autre endroit, tel qu'une 
disquette ou un serveur reseau. 



OK 



Annuler 



L'installation peut alors se poursuivre. 



Assistant Composants de Windows 



Configuration des composants... 

Le programme d'installation effectue les modifications de configuration que vous 
avez demandees. 




Veuillez patienter pendant que le programme d'installation configure les 
composants. Ceci peut durer plusieurs minutes, en fonction des composants 
selectionnes. 



£ tat : lnstallationdesserviceslnternet(IIS)encours... 



< Precedent Suivant > 
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Le serveur IIS est maintenant installe. 

Vous pouvez trouver sur le disque dur C, un nouveau dossier Inetpub contenant a son tour differents sous-dossiers. 



I AdminScripts 


/ nssamples 


1 Scripts 


wwwroot 



local doivent etre deposes ou enregistres dans le dossier Inetpub\wwwroot. 

fichier, par exemple index.htm, on encodera dans la barre d'adresse du navigateur 



O Index - Windows Internet Explorer 




) 




http://localhost/index.htm 


V 
















\ ®1 


Index 





tf\ Si vous avez une version de XP edition familiale, vous ne pouvez pas installer IIS. Retenez dans ce cas, I'option 
v EasyPhP presentee ci-apres. 



Les fichiers du serveur 

Pour acceder a un 
local host/index, htm. 



2. Le serveur local EasyPHP 

EasyPHP est une plate-forme de developpement Web comprenant le renomme serveur Apache ainsi qu'un interpreteur 
de scripts PHP, le serveur de bases de donnees MySQL et I'outil d'administration PhpMyAdmin. Initialement prevu pour 
le developpement de scripts PHP en local, son serveur Apache vous permet de tester en local vos applications AJAX. 




-tUEbL.Dr.nL 



EasyPHP est telechargeable a I'adresse : www.easyphp.org/telechargements.php3. Precisons que EasyPHP est un 
outil qui a largement fait ses preuves et qu'il est entierement gratuit. 

Apres avoir selectionne la langue qui sera utilisee par I'assistant d'installation, celle-ci debute. 
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Installation - EasyPHP 



□ S 





II 




III I 

1 






■ 












in 
3 
□ 






□ 
z 

H 






Of 
□ 
IL 






Q. 
I 
0. 

J 
f 
Ul 
31 




Z 

u 
I 
u 



Bienvenue dans I'assistant 
d'installation de EasyPHP 



Cet assistant va vous guider dans I'installation de EasyPHP 
2.0 sur voire ordinateur. 

II est recommande de fermer toutes les applications actives 
avant de continuer. 

Appuyez sur Suivant pour continuer ou sur Annuler pour 
abandonner I'installation. 



Suivant ; 



Annuler 



La suite de programmes sera accessible sur le disque dur C - Program Files -Easy PHP. 



Installation - EasyPHP 



Dossier de destination 

□u EasyPHP doit-il etre installe ? 




L'assistant va installer EasyPHP dans le dossier suivant. 

Pour continuer, appuyez sur Suivant. Si vous souhaitez choisir un dossier different, 
appuyez sur Parcourir. 



CAProgram Files\EasyPHP 2.0 



Parcourir.. 



Le programme requiert au moins 62,9 Mo d'espace disque disponible. 



< Precedent 



Suivant > Annuler 



L'installation est terminee. 

■ Les fichiers a tester devront etre situes dans le sous-dossier Program Files\EasyPHP\www. 



Pour afficher ceux-ci dans le navigateur, il faut avant toutes choses demarrer le serveur local : Programmes 
EasyPHP - EasyPHP. 
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EasyPHP (3 [X 



[J I Apache ~| Demarre | MySQL | Demarre [ < | 




On encode ensuite dans la barre d'adresse du fichier, par exemple index. php, localhost/index.php ou 
127.0.0.1/index.php. 



Index - Windows Internet Explorer 



^ ▼ |g]http://127,Q.0,l/index,php @g| |*» | |_X 
& & jglndex | ! { 
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Introduction au JavaScript 



1. Definition 

JavaScript est un langage de script qui, incorpore aux balises Html ou Xhtml, permet d'agrementer la presentation et 
I'interactivite des pages Web. 

Detaillons et completons cette definition. 

Le JavaScript est un langage de script, distinct du langage Html. Le JavaScript est en quelque sorte un "petit" langage 
de programmation dont les lignes de code viennent s'ajouter au langage Html. Ce langage, inspire plus ou moins 
directement du langage C, ne pose pas de problemes de comprehension a ceux qui ont deja touche a la 
programmation. Par contre, les utilisateurs issus de la bureautique ou de I'infographie risquent d'etre un peu deroutes 
devant les elements classiques de la programmation comme les variables, les instructions conditionnelles, les boucles, 
les fonctions et autres methodes. 

Le Html avec sa philosophie de structuration de contenu est essentiellement statique. Tres rapidement, le besoin s'est 
fait sentir d'y ajouter un peu de mouvement et surtout de I'interactivite avec I'utilisateur. C'est ce que permet le 
JavaScript. 

Citons pour exemple : 

• animer du texte ou des images, 

• reagir a Taction de la souris, 

• detecter le type et la version du navigateur, 

• verifier la saisie dans les formulaires, 



• effectuer des calculs simples, 



• demander une confirmation, 



• afficher la date et I'heure, 

• gerer les menus de navigation, 

• rediriger le visiteur vers une autre page, 



• etc. 

Les lignes de code du JavaScript sont gerees et executees directement par le navigateur lui-meme, sans devoir faire 
appel aux ressources du serveur qui heberge la page. C'est ce qu'on appelle une application "cote client". II existe 
d'autres langages, plus evolues comme le PHP ou I'ASP qui eux, traitent les informations sur le serveur avant de les 
renvoyer sous forme de page Html au navigateur de I'utilisateur. Ce sont les applications "cote serveur". Ces dernieres 
sortent du cadre fixe a notre etude. Signalons simplement qu'il existe bien une version "cote serveur" de JavaScript 
mais que nous n'aborderons pas. Nous nous limitons done a la version la plus repandue et la plus abordable, soit le 
JavaScript "cote client". 

La tradition veut que Ton precise dans une introduction au JavaScript que celui-ci (malgre la confusion qui peut naitre a 
partir du nom) n'a rien de commun avec le langage Java. Ce dernier, est un veritable langage de programmation plus 
performant et bien plus complexe dont le code est compile sous forme d'applets Java. Celles-ci peuvent s'executer a 
partir d'une page Web pour autant que la Machine Virtuelle Java soit installee sur le poste du visiteur. Pour rappel, le 
code du Java-Script, inclus dans la page Html, est quant a lui directement "interprete" par le navigateur au moment de 
son execution. 

Consequence directe de I'inclusion du JavaScript dans les pages html, le code JavaScript sera visible par une simple 
consultation du code source de la page. Ceci peut faire le desespoir des concepteurs debutants mais ne constitue pas 
vraiment un handicap etant donne que le JavaScript n'est destine qu'a de petites applications, finalement bien connues 
de tous. Pour les applications plus professionnelles, celles-ci seront realisees avec des langages plus evolues cote 
serveur. Ce qui preservera alors la confidentiality du code. 

Le JavaScript est un langage oriente objet. Nous y reviendrons en detail plus avant dans notre etude. Notons 
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simplement que JavaScript permet d'acceder directement aux differents elements du document et de les manipuler. 
Comme principaux elements ou objets de la page Html, on peut citer la fenetre du navigateur, le document Html, les 
images, les cadres, les formulaires, les elements de formulaire ou tout autre element que vous aurez au prealable 
identifie. 



C\ L'objectif de cette partie n'est pas de faire de vous des programmeurs emerites en JavaScript mais de fournir 
des bases solides qui vous permettront de comprendre le fonctionnement de la technique AJAX ainsi que les 
manipulations de donnees qu'elle induira. 



2. Bref historique 

Le langage JavaScript est apparu en 1995 avec le navigateur Netscape 2. Le JavaScript 1.0 etait ne. Les possibilites 
offertes par ce langage ont tres vite seduit les utilisateurs et les createurs du Web, creant a I'epoque un vif interet 
sinon une petite revolution. 

Du cote de chez Microsoft, alors en retard technologiquement dans le domaine de I'lnternet, JavaScript a ete integre 
tres rapidement au navigateur Internet Explorer 3. En effet, il ne fallait pas de licence pour utiliser le JavaScript. Par 
contre, dans le climat de guerre froide entre les deux constructeurs, il n'etait pas question pour Microsoft d'acheter une 
licence a Netscape pour en adapter le code. C'est alors que JScript est ne, variante du JavaScript selon Microsoft, qui 
reprend la plupart des fonctions du JavaScript et qui en elargit le champ d'application. 

Les choses etaient mal parties sur le plan de la compatibilite. Heureusement, les deux firmes accepterent de participer 
a une standardisation. L'organisme choisi fut I'ECMA (European Computer Manufactures Association). En 1997, le 
JavaScript a ete standardise sous le vocable ECMAScript sous la reference ECMA-262. En fait, cette standardisation n'a 
porte que sur la syntaxe de base, n'apportant qu'une compatibilite minimale et chaque editeur a continue ses 
developpements independamment I'un de I'autre. 

Avec Netscape 3 (fin 1996) est apparue la version JavaScript 1.1. Puis avec Netscape 4 (1997), la version 1.2. Ces 
versions furent egalement reconnues par les versions suivantes d'Internet Explorer tandis que JScript voyait lui aussi 
apparaitre de nouvelles versions. 

Commence alors le long declin de Netscape. JavaScript lance encore des versions 1.3, 1.4 et 1.5 mais elles n'ont pas 
connu le retentissement des versions precedentes. 

Parallelement a 1'evolution (sans revolution) du JavaScript, il y a un autre facteur de divergence. Nous avons vu, dans la 
definition, que le langage JavaScript etait un langage oriente objet. La fagon de definir et d'acceder a ces objets a 
egalement connu une approche differente selon I'editeur du navigateur. Le W3C a reagi a cette incompatibility an 
langant le DOM (Document Object Model). Cette standardisation a ete globalement bien suivie, mais il subsiste des 
differences notoires d'interpretation (voir chapitre Le DOM (Document Object Model)). 

Devant ce bel imbroglio, il importe d'adopter quelques regies d'ordre pratique. 



^ Globalement, JavaScript est bien reconnu par tous les navigateurs. 



Dans la nebuleuse des differentes versions, la plupart des concepteurs ont choisi la version JavaScript 1.2 
vraiment compatible. 



Q Pour des applications assez basiques, le probleme de compatibilite ne se posera pas. 



C\ Des que Ton passe a des applications plus sophistiquees, on peut avancer que le JavaScript est hautement 
^ incompatible. A tel point qu'il faut parfois ecrire un code adapte a chaque navigateur et eventuellement a chaque 
version de celui-ci ! 



3. Limites 

Presque toutes les pages Web integrent quelques elements de JavaScript. Ce qui ne semble plus creer de reels 
problemes de securite, d'ou son succes aupres des createurs de sites Web et des internautes. 

Mais cette relative securite a un prix qui se traduit par de severes limites techniques. 

La principale limite de JavaScript est qu'il ne permet pas de lire et d'ecrire sur le disque dur ou tout autre peripherique 
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du visiteur. La seule exception est celle qui permet a JavaScript de lire et d'ecrire sur le disque dur uniquement dans la 
zone reservee aux cookies. C'est la seule interaction que JavaScript peut avoir avec votre disque dur. 

En outre, aucune instruction n'est prevue en JavaScript pour generer une connexion vers un autre ordinateur ou un 
serveur. Cela n'est possible que par la creation d'un objet XmlHttpRequest qui est un element indispensable a la mise 
en place d'applications de type AJAX (voir chapitre L'objet XmlHttpRequest). 

II ne sera done pas possible de concevoir en JavaScript des applications telles qu'un forum de discussion, un sondage 
ou une boutique en ligne. Toutes ces applications necessitent un langage plus puissant, generalement implante cote 
serveur, comme le PHP ou I'ASP. 

Meme si cela est en partie excessif, il faut etre conscient que le JavaScript est un "petit" langage de programmation et 
qu'il n'a ete congu que pour completer le HTML normal. 



^ L'action du JavaScript est ephemere et ne dure que le temps consacre a la visite de la page par I'utilisateur. 



4. Outils pour le JavaScript 

Le code source des pages Web presente cet avantage qu'il ne necessite pas de logiciels couteux. JavaScript ne deroge 
pas a la regie. 

Pour I'apprentissage du JavaScript, il vous faut : 

• un simple editeur de texte, 

• un navigateur compatible JavaScript, 



• et des connaissances du langage Html. 

Le JavaScript, comme la plupart des langages de programmation s'ecrit en texte brut. Ainsi un simple editeur de texte 
comme le Bloc-notes de Windows (notepad) fait parfaitement I'affaire. L'utilisation de la fenetre de code d'un editeur 
Html est egalement possible. 

Le JavaScript etant interprets par le navigateur, n'importe quel navigateur compatible JavaScript peut etre adopte. Ce 
qui est le cas de la plupart des navigateurs du marche. Internet Explorer 6 et 7 ou Firefox, retenus dans le cadre de cet 
ouvrage, sont bien entendu parfaitement adaptes au JavaScript. Veillez cependant a ce que la fonction JavaScript ne 
soit pas desactivee dans les options de votre navigateur. 

Puisque le code JavaScript vient se greffer dans le code source de la page, une connaissance approfondie des balises 
Html ou Xhtml est recommandee, sinon indispensable. 



5. JavaScript et le Xhtml 

Le JavaScript est interprets par le navigateur. II faut done I'informer que le code qu'il risque de rencontrer est du 
JavaScript. 



a. Balises meta 

Au niveau des balises meta, on peut determiner le ou les langage(s) complementaire(s) utilise(s) dans le document 
Xhtml. 

On ajoutera aux autres balises meta, la balise : 

<meta http-equiv= " Content -S cript-Type " content="text/ javascript" /> 

Cette balise signale que la page comporte (ou peut comporter) un script et que ce script, en mode texte, est du 
JavaScript. 



b. Code JavaScript 

Le code JavaScript sera signale au navigateur en entourant celui-ci des balises <script> . . . </script> 
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<script type="text/ javascript"> 
//< ! [ CDATA [ 
Code JavaScript 

//] ] > 
</script> 



ALa balise <script type="text/ javascript"> determine qu'il s'agit d'un script JavaScript. En effet, il existe 
d'autres langages de script qui peuvent s'implementer dans une page Html. On pense au VBscript de Microsoft 
qui est un langage issu du Visual Basic mais qui n'a pas eu le meme succes que le JavaScript. 



C\ Dans la pratique, on rencontre frequemment la declaration abregee <script>. Celle-ci est valable car la plupart 
des navigateurs ont repris le JavaScript comme langage de script par defaut. 



^\ Parfois, la version du JavaScript est ajoutee a cette balise pour forcer le navigateur a respecter les 
" specifications de la version ainsi mentionnee. Ce qui donne par exemple <script type="text/ javascript" 
ianguage=" javascripti . 2">. Cette precision n'est plus tres utilisee car les navigateurs recents se "debrouillent" 
pour gerer le JavaScript independamment de sa version. 



Q En Html, on a pris I'habitude d'entourer le code JavaScript des balises <! — ... //— > pour cacher le code a 
I'intention des navigateurs qui ne reconnaissent pas le JavaScript. Remarquons que les balises <! — ... — > 
sont des commentaires Html et les barres obliques // du commentaire JavaScript. 



tf\ En Xhtml, il faut entourer le code JavaScript par //< ! [cdata[ ... //]]>. Cette notation, issue du XML, permet 
d'informer le navigateur de ne pas analyser et interpreter ce qu'il y a entre le <! [cdata[ initial et le ] ]> final. 
L'analyseur syntaxique va seulement recuperer le contenu de cette section, sans chercher a reperer des balises, 
des entites ou toute autre specificite syntaxique XML. En effet, sans //<! [cdata[, les signes < inferieur a et > 
superieur a du JavaScript seraient reconnus comme les signes < de debut de balise et > de fin de balise du Xhtml. 



6. Un premier script 

Encodons le code suivant dans un editeur de texte : 



<!DOCTYP<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ /EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Premier script</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type=' text/ JavaScript' > 
//<! [CDATA [ 

document . write ( "Mon premier JavaScript"); 

//] ]> 
</script> 
</body> 
</html> 



Commentaires : 

• le doctype n'a aucune influence sur I'execution du JavaScript. Ce qui n'est pas le cas des feuilles de style. 

• I'instruction document, write ("Mon premier JavaScript"); demande d'ecrire (write) le texte repris entre les 
parentheses dans le document. 
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• remarquez que I'instruction se termine par un point-virgule. 

On enregistre ce fichier au format htm. 

Ensuite, on affiche la page locale dans le navigateur. 



£ Premier script - Windows Internet... (2 



Jf ▼ & C:\Docurnents and be 




N 


[x] Live 


& & $ Premier script 






1 a- 






Mon premier JavaScript 


i 

v 


Poste de travail 


+ N 100% - 



La version Internet Explorer 6.0 pour Windows XP SP2 risque de vous apporter quelques desagrements lors de 
" la conception de vos scripts en local. Soucieux (mais a ce stade, un peu trop !) de la securite des pages affichees, 
Internet Explorer affiche le message d'information suivant. 



\i) Pour vous aider a proteger votre ordinateur, Internet X 
Explorer a restreint I'affichage du contenu actif de ce fichier. . . 



Q Pour visionner votre page comportant un script, il faut autoriser le contenu ainsi bloque. 



r 

'3 Premier script - Microsoft Internet ... |'-""|fn]f)<" 




Fichier Edition Affichage Favoris Outils ? 


if 


j Qprecedente - Q ■ Q g) 


: Liens 




G) Pour vous aider a proteger votre ordinateur, Internet X 

.. ■ ■ * P,£C-J 1 ■ IT 1 C 


[_a|_'ii_m ci o i ciu en 1 1 1 a 1 1 


Autoriser le contenu bloque. . . 1 




Quel est le risque encouru ? ^ 



Aide a propos de la barre d'informations 







® Term 










J Poste de travail 



^ Ce message d'information n'apparaitra plus (sauf exceptions) une fois que la page sera en ligne. 



^ II est a noter que cet avertissement de securite a ete supprime dans Internet Explorer 7.0. 

7. JavaScript interne 

On peut se poser la question ; "Ou inclure les balises <script> . . . </script> dans le document Xhtml ?". 
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II n'y a helas, pas de regie precise qui stipule a quel endroit d'un fichier Html ou Xhtml, le code JavaScript doit etre 
defini. La seule reponse est "La ou le navigateur en aura besoin" ! 

Pour rappel, la page Html est chargee par le navigateur de fagon sequentielle (de haut en bas). II lit d'abord I'en-tete 
(le contenu des balises <head>) et ensuite le corps (<body>), ligne par ligne. Tous les elements du "body" sont 
interpretes dans I'ordre d'ecriture des balises. 

Si on fait appel a du code JavaScript, alors que celui-ci n'a pas encore ete defini dans la page et done interprets par le 
navigateur, ce dernier ne peut, en toute logique, pas le prendre en charge (erreur sur la page). 

On peut ainsi retrouver le code JavaScript a plusieurs endroits de la page : 

• il n'est pas rare que du code JavaScript soit inclus, totalement ou en partie, dans les balises <head>. En effet, ce 
code sera alors lu en premier par le navigateur et le concepteur peut en toute securite faire appel a ces 
fragments de code, n'importe ou a I'interieur de la balise <body> car il sera deja disponible. 

• on retrouve parfois du code JavaScript immediatement apres la balise <body> lorsque celui-ci est plus specifique 
au corps du document. 

• si le JavaScript traite les donnees d'un formulaire, le code peut apparaitre apres la balise <form>. 

• des instructions comme document .write ("...") ; peuvent etre incluses dans le texte de la page a I'endroit 
souhaite. 

• etc. 



Q Le code JavaScript doit etre encode avant ou au plus tard au moment ou il devra etre execute. 



En outre, depuis que le JavaScript est reconnu comme le langage de script par defaut de la plupart des navigateurs, du 
code JavaScript peut-etre inclus directement dans la balise Html ou Xhtml, fonctionnant alors comme un attribut de 
celle-ci. 

Cette fagon de proceder n'est pas adoptee pour un code programme complique mais seulement pour un appel a des 
evenements, methodes, fonctions determines. 

Quelques exemples : 

<a onclick=" javascript : history .back ();" >Retour page precedente</a> 

Avec I'objet history de JavaScript, vous avez acces aux pages Web qui ont ete visitees par I'utilisateur et qui sont 
sauvegardees dans I'historique du navigateur. Avec la methode back(), on demande, au die sur le lien, de remonter 
d'une position dans I'historique, revenant ainsi a la page precedente. 

<hl o nmou s e o ve r = " hi s t o r y . ba ck ( ) " >Re t ou r page precedent e< /hi > 

Ici on demande de revenir a la page precedente par le simple survol de la souris (onmouseover). 

<f orm> 

<input t ype= " bu t t on " value= " r et our " oncl ick= " hi s t o r y . back ( ) " > 
< / f o rm> 

Quand I'utilisateur clique sur le bouton de formulaire, on revient a la page precedente. 



8. JavaScript externe 

II est egalement possible de noter le code JavaScript dans un ou des fichiers separes de la page Xhtml. Ce qui 
presente I'avantage de clarifier le code du document Xhtml et de respecter la regie de separation du contenu et de la 
presentation. II est ainsi possible d'appeler le meme code JavaScript a partir de fichiers Xhtml separes sans avoir a le 
reecrire. 

Ce fichier externe est un fichier de texte brut encode, par exemple, avec le Bloc- notes de Windows. Ce type de fichier 
comporte I'extension .js. II contient uniquement du code JavaScript, et done sans les balises <script>. 

Ce fichier est appele dans la page Xhtml par : 
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<script src = "fichie r_ext erne . js"></ script> 

Cette balise d'appel se place generalement entre les balises <head> . . . </head>. 
Reprenons notre exemple du point Un premier Script de ce chapitre. 

a. Le fichier externe 

Ce fichier externe, que nous appellerons write. js, comporte la seule ligne de code : 

document .write ("Mon premier JavaScript externe") ; 

b. La page Xhtml 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>Script externe</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript " /> 

<script src=" write. js"></ script> 

</head> 

<body> 

</body> 

</html> 



Le resultat est identique a la capture d'ecran proposee au point Un premier Script. 



9. Quelques conseils pour le debogage 

Vous serez inevitablement deroutes lors de vos premieres applications en JavaScript. En effet, les navigateurs 
permettent beaucoup de "souplesse" dans le code Html et les feuilles de style CSS. Avec le JavaScript, on passe a la 
rigueur d'un langage de programmation. La moindre erreur sera sanctionnee ! Et une erreur est si vite arrivee... Un 
point a la place d'une virgule, une faute de frappe, une majuscule absente ou indue, une parenthese manquante, un 
guillemet au lieu d'une apostrophe, une accolade oubliee, voila un florilege de petites erreurs qui empechent 
I'execution d'un script. 

Pour faciliter I'apprentissage, I'auteur conseille d'activer le debogueur de script par defaut de votre navigateur. 
■ Dans le cadre d'Internet Explorer, Outils - Options Internet - Onglet Avances. 
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Options Internet 



General j| Securite II Confidentiality Contenu I Connexions Programmes Avances 



Parametres 



| Navigation <v 

0 Activer I'affichage des dossiers sur les sites FTP (en dehors dlnternet Exp 

O Activer le menu Favoris personnalise 

0 Activer les extensions tierce partie du navigateur* 

0 Activer les styles visuels sur les boutons et les controles dans les pages W 

0 Afficher des messages d'erreur HTTP simplifies 

1 I Afficher une notification de chaque erreur de script 
0 Autoriser les transitions entre les pages 

0 Avertir lorsque le telechargement est termine 

1 I Desactiver le debogage des scripts (autres applications) 

n i.M^JBaf-f.y.i.iiMiiJ.^jai.i^iM^JWM 

0 Fermer les dossiers inutilises dans IHistorique et les Favoris* 

1 I Forcer la composition hors ecran meme sous Terminal Server* 
"1 Permettre aux sites Web d'utiliser le volet de recherche* 



J 



II est peut-etre necessaire d'installer le "Script Debugger" de Microsoft. Ce programme est disponible en 
telechargement pour differentes versions du systeme d'exploitation de Microsoft a I'adresse : 
http: //www. microsoft, com/down loads/resu Its. aspx?productID=&freetext=script+debugger&Display La ng=en ou plus 
simplement, par une recherche sur Google avec comme mots-cles "Script Debugger download". 

Un message d'erreur du type affiche ci-dessous vous fait gagner un temps precieux et vous aide a corriger votre script. 



Une erreur est sur venue. 
Souhaitez-vous effectuer un debogage ? 

Ligne : 1 1 

Erreur : Constante chatne non terminee 



Oui 



Non 



Si vous utilisez le navigateur Firefox, vous avez a votre disposition la console JavaScript, Outils - Developpement 
Web - Console JavaScript ou Outils - Console d'erreurs (selon les versions). 



Console d'erreurs 



Tout 



Erreurs 



SHIS 



! Avertissements Messages 



Evaluer 



unterminated string literal 

file:J//G:/chap3 Al.htm 



Ligne : 12 



document . write ( "Hon premier JavaS.. 
+ 
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Notions fondamentales 



Avant de passer a I'etude proprement dite de tout langage de programmation, aussi modeste soit-il comme le JavaScript, 
il importe de parcourir quelques regies d'ecriture et de syntaxe. 

1. La casse 

Le JavaScript est sensible a la casse (case sensitive). II fait done la difference entre les majuscules et les minuscules. 
Ainsi, la variable var = numero n'est pas egale a la variable var = Numero ni a var = numero. 
L'alphabet ASCII compose de 128 caracteres est utilise. Ainsi le code doit etre ecrit sans caracteres accentues. 
Les espaces, tabulations, retours chariot, lignes vierges sont (sauf exceptions) ignores dans le code. 

2. Les commentaires 

II est toujours utile d'annoter le code avec des commentaires en vue de faciliter sa lisibilite, surtout a la relecture. 
En JavaScript, ces commentaires peuvent se presenter sous deux formes differentes : 

• par une double barre oblique (//) devant le commentaire. Cette notation est bien adaptee pour les 
commentaires qui se notent sur une seule ligne. 

// Ceci est un commentaire 

• par les signes /* ... */. Ce qui permet d'etendre le commentaire sur plusieurs lignes. 

/* Pour les bavards, JavaScript a prevu 
des commentaires sur plusieurs lignes */ 

3. Le point-virgule 

Chaque commande ou instruction JavaScript se termine par un point-virgule. 

Exemple : document .write ("ligne : " + compt + "<br>"); 

Bien que cela ne soit plus obligatoire en toutes circonstances, il reste prudent de maintenir cette regie de fagon 
systematique lorsqu'on est debutant en JavaScript. 

4. Les constantes 

Les constantes sont fixees par la valeur indiquee dans le code. 
Les valeurs reconnues par le JavaScript sont : 
Les nombres entiers ou a virgule flottante 

Notons que pour ces derniers, le point remplace la virgule habituellement utilisee en bureautique. 

2005 

16.6666 

Les chaines de caracteres 

El les sont constitutes d'une suite de caracteres quelconques, encadree par des guillemets ou des apostrophes. Une 
chaine commencee avec des guillemets doit se terminer avec des guillemets, meme chose pour I'apostrophe. 
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"CSS + DHTML" 
'3.1416' 

Si la chame de caracteres contient un guillemet, une apostrophe ou une barre oblique a gauche (backslach), ces 
derniers risquent d'etre interpretes comme du code JavaScript. Les caracteres cites s'encodent ainsi precedes d'une 
barre oblique a gauche. 

Soit : 

V pour I'apostrophe. 
\" pour le guillemet. 
\\ pour la barre oblique a gauche. 

document . write ("Je lui ai dit \ ; \"Va a l\'ecole \"") . 

Une chaine de caracteres peut etre vide. C'est I'equivalent de la valeur zero pour une constante numerique. Dans ce 
cas, elle s'ecrit au moyen de deux guillemets ou de deux apostrophes rigoureusement consecutifs (sans espace entre 
eux). 

les valeurs logiques ou booleennes, soit true pour vrai et false pour faux, 
null lorsqu'il n'y a pas de valeur attachee a la variable, 
undefined. C'est la valeur d'une variable qui n'a pas ete initialisee. 

5. Les variables 

Contrairement a la plupart des autres langages de programmation, JavaScript n'est que faiblement type. En effet, il 
n'est pas necessaire d'en declarer le type (comme par exemple avec int, float, double, char de PHP) et une variable 
peut a tout moment changer de type. 

Les variables se declarent de deux fagons : 

a) explicitement par le mot cle var. 

var indice 

b) implicitement par son apparition a gauche du signe egal. 

b = 256 

Le nom de la variable doit respecter la syntaxe suivante : 

• la variable doit commencer par une lettre ou un souligne 

• la variable peut comporter un nombre indetermine de lettres, de chiffres ainsi que des caracteres _ et $. 

• les espaces ne sont pas autorises. 

• le nom de variable ne peut utiliser des mots dits "reserves". En effet, ces mots sont utilises dans le code 
JavaScript meme. On ne peut nommer une variable, par exemple, var, true, false, else, etc. La liste complete de 
ces mots reserves est fournie en annexe. 

• pour rappel, le JavaScript est sensible aux majuscules et minuscules. 
Exemples de declaration de variables valides : 

• var pi; 

• var code_postal; 

• var formulairel; 
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• var result$; 



On peut initialiser une variable en meme temps que sa declaration au moyen du signe egal ( = ) suivi d'une valeur 
numerique, d'une chame de caracteres ou d'une valeur booleenne. Ce qui evite que la valeur undefined soit retournee 
en cours d'execution du script. 

Exemples : 



• var pi = 3.1415926535; 



• var code_postal = 59000; 



• var formulairel = "Ville"; 



• var result$ = true; 



Exemple : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type=' text/ JavaScript' > 
//<! [CDATA [ 

var texte = "Mon chiffre prefere est le "; 
var variable = 7; 

document . write (texte + variable); 

//] ]> 
</script> 
</body> 
</html> 



£ JavaScript - Windows Internet Ex... [T]f5"|fX 



▼ @ C:\Documents and Se *t X Liv 



'0 JavaScript 



Mon chif&e prefere est le 7 



V 



^ Poste de travail 



■\ 100% ' 



6. Les operateurs 

JavaScript comporte de nombreux operateurs selon le type de valeurs. 

a. Les operateurs arithmetiques 

Ce sont les operateurs classiques de toutes les operations de calcul. 
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Operateur 


Nom 


Signification 


Exemple 


++ 


plus 


addition 


x + 100 


- 


moins 


soustraction 


x - 1 


* 


multiplie 


multiplication 


x * 2 


/ 


divise 


division 


x/ 10 


% 


modulo 


reste de la division par 


356 % 5 




egal 


affectation de valeur 


i = 4 



Commentaires : 



• lorsque I'operateur + porte sur deux operateurs dont I'un au moins est une chaine de caracteres, il joue le 
role d'operateur de concatenation (voir plus loin). 

• I'operateur = affecte simplement une valeur. On le confond souvent avec I'operateur d'egalite = = . 

b. Les operateurs de comparaison 

Ces operateurs sont souvent utilises lors de tests conditionnels. 



Operateur 


Nom 


Signification 


< 


inferieur 


x < 10 


< = 


inferieur ou egal 


x <= 10 




egal 


x == 10 


> = 


superieur ou egal 


x >= 10 


> 


superieur 


x > 10 




different 


x != 10 



Pour rappel, le = est un operateur d'attribution de valeur tandis que le == est un operateur de comparaison. Cette 
confusion est une source frequente d'erreur de programmation. 

Le resultat renvoye par une operation de comparaison est une valeur booleenne true (vrai) ou false (faux). 

c. Les operateurs booleens (ou logiques) 

Ces operateurs sont egalement utilises dans les tests conditionnels mais logiques cette fois. lis portent sur des 
operandes booleens et le resultat renvoye est egalement une valeur booleenne (true ou false). 



Operateur 


Nom 


Signification 


Exemple 


&& 


et 


les deux conditions sont 
verifiees 


conditionl && condition2 




ou 


une des deux conditions 
est verifiee 


conditionl || condition2 


! 




la condition n'est pas 
verifiee 


! conditionl 
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d. Les operateurs associatifs 



Ces operateurs associent deux operateurs d 'affectation. C'est une forme abregee pour noter les operateurs de 
calcul. Ceci est plutot reserve a des programmeurs plus confirmes. 



Operateur 


Nom 


Exemple 


Signification 


+ = 


plus egal 


x += y 


x = x + y 




moins egal 


x -= y 


x = x - y 


* = 


multiplie egal 


x *= y 


x = x * y 


/= 


divise egal 


x /= y 


x = x / y 



e. Les operateurs d'incrementation 

Un classique des langages de programmation mais souvent deroutant pour les novices. Cet operateur 
d'incrementation est tres utilise pour faire varier d'une unite les compteurs implementes dans le code. 



Ainsi pour une valeur de depart x = 0, au premier passage x++ vaut 1 (x=x + 1 ou 1 = 0 + 1). Au second passage, x+ + 
vaut 2 (x=x +1 ou 2=1 + 1). Au troisieme passage, x++ vaut 3 (x=x +1 ou 3 = 2 + 1). Et ainsi de suite. 



Operateur 


Nom 


Exemple 


Signification 


X+ + 


incrementation 


X = X+ + 


x++ est le meme que 
x=x+l 


x— 


decrementation 


X = x— 


x-- est le meme que 
x=x-l 



f. Les operateurs de concatenation 

Utilise avec des chaines de caracteres, cet operateur ajoute une chame de caracteres a la suite d'une autre chaine 
de caracteres. 



Operateur 


Nom 


Exemple 


Signification 


+ 


concatenation 


"chainel" + "chaine2" 


"chainel chaine2" 



Lorsque vous concatenez des chaines de caracteres, il ne faut pas oublier les espaces au debut ou a la fin de 
chacune d'elles, sous peine de coller les chaines. 

g. Autres operateurs 

II existe encore d'autres operateurs mais ils depassent largement le cadre de cet ouvrage. 
Exemple 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type=' text/ JavaScript' > 
//<! [CDATA [ 

var variable = (100 - 50) * 2; 

document .write (" (100 - 50) * 2 = " + variable); 

//] ]> 
</script> 
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</body> 
</html> 



£ JavaScript - Windows Internet Ex... f^fpjfx^ 



1^ ▼ C:\Documents and 5e \ *f \ | X | 



JavaScript 



(100 - 50)* 2 = 100 



'j Poste de travail 



& 100% 



h. Priorite des operateurs 

Comme en algebre, lorsqu'une expression comporte plusieurs operateurs, celle-ci est evaluee selon la priorite 
respective des operateurs. 

Voici, pour les operateurs repris dans notre etude, la liste des priorites, de la plus basse a la plus haute . 



Operateur 


Symbole 


virgule 




association et affectation 


= += -= *= /=<<=> > = 


ou logique 


II 


et logique 


&& 


comparaison 


= !=<<=>=> 


addition/soustraction 


+ - 


multiplication/division 


*/ 


different et incrementation 


! ++ -- 


parentheses 


() 



En cas de priorite egale d'operateurs consecutifs, I'operation est effectuee de gauche a droite. 

On peut toujours modifier une priorite d'operateurs par I'emploi de parentheses car celles-ci ont le plus haut niveau 
de priorite. 



7. Un peu de theorie objet 

JavaScript est un langage oriente objet. II va ainsi diviser la page affichee a I'ecran en objets mais surtout, va vous 
permettre d'acceder a ces objets et de les manipuler. 

Illustrons tout d'abord differents objets qui peuvent etre contenus dans une page Web. 
Soit la page suivante. 
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page Web - Windows Inter 



@ C:\Documents and Se 


V 







& <& \'g La page Web 



La page W eb 
Nom : 



Sexe 



0Masculin 
OFeminin 



Envoyer 



•j Poste de travail 



\ 100% 



Cette page s'affiche dans une fenetre du navigateur. C'est I'objet fenetre {window) 



r 

0 La page Web - Windows Internet . 




▼ C:\Documents and Se v 






& ■{£? f g$ La page Web 








j a- 



La page Web 
Nom : 



Sexe: 0Masculin 
Feminin 



Envoyer 



•j Poste de travail 



\ 100% 



objet fenetre 



Dans cette fenetre, il y a un document Html. C'est I'objet document. Autrement dit (et c'est la que Ton voit apparaitre la 
notion de hierarchie des objets JavaScript), I'objet fenetre contient lui-meme I'objet document (document). 



La page Web 
Nom : 



Sexe : 



0Masculin 
OFeminin 



Envoyer 



■ objet document 



Dans ce document, on trouve un formulaire au sens Html du terme. C'est I'objet formulaire (form). Autrement dit, 
I'objet fenetre contient un objet document qui lui-meme contient un objet formulaire. 
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Nom 



Sexe : 



0Mascnlin 
OFeminin 



Envoyer 



■objet formulaire 



Dans ce formulaire, on trouve trois elements : une zone de texte, des boutons d'option et un bouton d'envoi. Ce sont 
respectivement I'objet texte, I'objet option (radio) et I'objet bouton. Soit I'objet fenetre contient I'objet document qui 
contient I'objet formulaire qui contient a son tour I'objet texte, I'objet option et I'objet bouton. 



Nom : 



■objet texte 



Sexe 



0Masculin 
O Feminin 



objet option 







Envoyer 





-objet bouton 



La hierarchie des objets de cet exemple est done : 

fenetre -> document -> formulaire -> texte, option, bouton 

Pour acceder a un objet, il faut donner le chemin complet de I'objet en allant du contenant le plus exterieur a I'objet 
reference. 

Soit par exemple pour le bouton option "Masculin" 

(window) . document . form. radio [ 0 ] . 

Nous avons mis I'objet window entre parentheses car window occupe toujours la premiere place dans la hierarchie des 
objets. II est repris par defaut en JavaScript et devient done facultatif. 



^\ Cette fagon de proceder est la premiere maniere mise en place par le JavaScript pour acceder a certains objets. 

^ Depuis 1998 et I'apparition du DOM (Document Object Model) d'autres procedes ont vu le jour pour I'acces aux 
objets. On peut citer par exemple, les methodes getElementBylD, getElementsByName ou getElementsByTagName 
(voir chapitre Le DOM (Document Object Model)- Acceder aux noeuds). 



La notation utilisee ci-avant, appelee a posteriori DOM niveau 0, accompagne nos premiers pas en JavaScript, on 
" lui prefere cependant en cours d'etude, des methodes plus recentes pour acceder aux objets. 
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Fonctions et methodes 



1. Declaration d'une fonction 

Une fonction est un groupe de lignes de code de programmation, ecrites par le concepteur et destinees a executer une 
tache bien specifique. On peut, si besoin est, I'utiliser a plusieurs reprises dans la page. En outre, I'usage des fonctions 
ameliore grandement la lisibilite de votre script. 

Pour declarer ou definir une fonction, on utilise le mot (reserve) function. 
La syntaxe d'une declaration de fonction est la suivante : 

function nom_de_la_fonction (arguments] { 

. . . code des instructions . . . 

} 

Remarques : 

• le nom de la fonction suit les memes regies que celles qui regissent le nom des variables (voir dans ce chapitre 
- Notions fondamentales - Les variables). Pour rappel, JavaScript est sensible a la case. Ainsi function_a() ne 
sera pas egal a Function_a(). 

• tous les noms de fonctions dans un script doivent etre uniques. 

• la mention des arguments est facultative mais dans ce cas, les parentheses doivent rester. C'est d'ailleurs 
grace a ces parentheses que I'interpreteur JavaScript distingue les variables des fonctions. Nous reviendrons 
plus en detail sur les arguments et autres parametres. 

• lorsqu'une accolade est ouverte, elle doit imperativement , sous peine de message d'erreur, etre refermee. 
Prenez la bonne habitude de fermer directement vos accolades et d'ecrire le code entre elles. De nombreux 
scripts ne fonctionnent pas pour des erreurs d'accolades fermantes. 



^\ Le nombre d'accolades ouvertes (voir fonctions, tests conditionnels, etc) doit toujours etre egal au nombre 
" d'accolades fermees. 



• le fait de definir une fonction n'entraine pas I'execution des commandes qui la composent. Ce n'est que lors de 
I'appel de la fonction que le code de programme est execute. 

• la declaration de fonction se place souvent dans I'en-tete du document Html ou Xhtml soit entre les balises 
<head> . . . </head>. Elle est ainsi toujours disponible et peut etre appelee a tout moment dans le document. 

Exemple : 



<head> 

<script type="text / javascript "> 
//< ! [CDATA [ 
function message!) { 
document . write ( "Bienvenue " ) ; 
} 

//] ]> 

</script> 

</head> 



2. Appel d'une fonction 

Le script de la fonction ne s'execute que lorsque celle-ci est appelee. 

L'appel d'une fonction se fait par le nom de la fonction (avec les parentheses). On y adjoint les parametres eventuels. 
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Soit par exemple 



<script type=" text / javascript "> 

//< ! [ CD ATA [ 

me s s age ( ) ; 

//] ] > 

</ script> 

Autre possibility, I'appel de la fonction se realise souvent au moyen de gestionnaires d'evenements comme le 
chargement de la page, le die d'un bouton. Nous retenons ici I'evenement onload qui appelle la fonction messageQ au 
chargement de la page. 

<body onload= "me s sage ( ) ; " > 



II faut veiller a ce que la fonction soit deja definie et connue de I'interpreteur avant son execution. 
La page complete serait : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

function message () { 

document . write ( "Bienvenue " ) ; 

} 

//] ]> 

</script> 

</head> 

<body onload="message ( ) ; "> 

</body> 

</html> 
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3. Passage de parametre(s) 

II est possible de passer des parametres a une fonction, e'est-a-dire de lui fournir une valeur ou le nom d'une variable 
afin que la fonction puisse effectuer les operations programmees a I'aide de ces parametres. 

Lorsqu'on passe plusieurs parametres a une fonction, il faut les separer par des virgules, aussi bien dans la declaration 
que dans I'appel. 

Soit une fonction qui calcule le cube d'un nombre : 

function c a 1 cu 1 ( nombre ) 

var cube = nombre*nombre*nombre; 

} 
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Cette fonction doit avoir une valeur de depart pour effectuer son operation. Cette valeur lui est fournie en argument 
lors de I'appel de la fonction. 

Lors de I'appel : caicui (5) ; 

Ou sous forme de variable : 

var nombre = 5 
calcul (nombre) ; 

Applique a notre exemple precedent, le script pourrait devenir : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//< ! [CDATA [ 

function message (texte) { 
document . write (texte) ; 
} 

//] ]> 

</script> 

</head> 

<body onload="message ('Bienvenue' ) ; "> 

</body> 

</html> 



C\ Nous avons entoure la chaine de caracteres 'Bienvenue' par des apostrophes car les guillemets etaient deja 
" utilises pour I'attribut onioad=" 



4. Variable locale ou globale 

II existe deux types de variables, les variables locales et les variables globales. Une variable globale est accessible 
partout dans le script. Une variable locale n'est accessible que dans la fonction qui I 'a creee. 

C'est ce qu'on appelle la portee des variables. Cette distinction est une source frequente d'erreurs, souvent difficiles a 
deceler, dans les scripts. 



a. Variable locale 

Une variable declaree dans une fonction (done a I'interieur des accolades de la fonction) par le mot cle var a une 
portee limitee a cette seule fonction. On ne peut pas exploiter cette variable ailleurs dans le script. On I'appelle done 
variable locale. 

function c a 1 cu 1 ( nombre ) 

var cube = nombre * nombre *nombre ; 

} 

Ainsi, la variable cube est dans cet exemple une variable locale. Si vous y faites reference ailleurs dans le script, cette 
variable est inconnue pour I'interpreteur JavaScript (message d'erreur). 

Si la variable est declaree contextuellement (sans utiliser le mot var), sa portee est globale une fois que la fonction a 
ete executee. 

function c a 1 cu 1 ( nomb r e ) { 
cube = nomb re * nomb re * nombre 
} 

La variable cube declaree contextuellement est ici une variable globale apres I'execution de la fonction cube () . 
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b. Variable globale 



Les variables declarees tout au debut du script, en dehors et avant toutes fonctions, sont toujours globales, qu'elles 
soient declarees avec var ou de fagon contextuelle. 



<script type="text / javascript "> 
//<! [CDATA [ 
var cube=l 

function calcul (nombre) { 

var cube = nombre*nombre*nombre 

> 

//]}> 
</script> 



La variable cube est bien globale. 

Pour la facilite de gestion des variables, on ne peut que conseiller de les declarer en debut de script (comme dans la 
plupart des langages de programmation). Cette habitude vous met a I'abri de complications certaines. 



5. L'instruction return 

Selon I'ecriture du code, le resultat d'une fonction peut etre retourne par l'instruction return. 
Soit la fonction multiple() qui calcule le produit de deux nombres (a et b). 

function mu 1 1 ip 1 e ( a , b ) { 
x = a *b ; 
return x ; 
} 

A I'appel de la fonction, on lui passe les parametres correspondant aux arguments a et b, soit multiple (4, 5) . 

resultat=multiple (4,5); 

Comme la valeur retournee par la fonction multiple() est 20, celle-ci est stockee dans la variable resultat. 
Le script complet devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function multiple (a, b) { 
x = a*b; 
return x; 
} 

//] ]> 
</script> 
</head> 
<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

resultat=multiple (4,5) ; 
document .write (resultat) ; 

//] ]> 
</script> 
</body> 
</html> 
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6. Quelques methodes JavaScript 

Les methodes sont des fonctions predefinies dans le langage JavaScript et dediees a un objet particulier. 
Nous avons jusqu'ici utilise la methode JavaScript write(), specifique a I'objet document. 

Passons en revue quelques autres methodes (de I'objet window). Cela permet de varier nos exemples dans la suite de 
notre expose. 



a. Alert() 

La methode aiert() de I'objet fenetre affiche une boite de dialogue. Celle-ci comporte un message qui reproduit la 
valeur (variable et/ou chaine de caracteres) de I'argument qui lui a ete fourni. Cette boite de dialogue bloque le 
programme en cours tant que I'utilisateur n'aura pas clique sur OK pour fermer celle-ci. 



£\ Regal des programmeurs debutants en JavaScript, cette methode est certes spectaculaire mais d'un role 
^marginal dans un site Web. Par contre, alert o est tres utile pour vous aider a debugger les scripts et y 
retrouver d'eventuelles erreurs de programmation. 



Sa syntaxe est : 

alert (variable) ; 

alert (" chaine de caracteres"); 

alert (variable + "chaine de caracteres"); 

Si vous souhaitez ecrire sur plusieurs lignes, il faut utiliser le signe \n. 
Exemple 

Une boite d'alerte va se declencher lorsque le bouton est clique. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function alerted { 

alert ("Ceci est un message d'alerte !"); 

} 

//]]> 
</script> 
</head> 
<body> 
<f orm> 

<input type=button value="Methode alert ()" onclick="alerte ( ) "> 
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</body> 
</html> 
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b. confirm () 

Cette methode de I'objet window affiche une boite de dialogue avec deux boutons ; OK et Annuler. En cliquant sur 
OK, la methode renvoie la valeur true et bien entendu false si on a clique sur Annuler. Ce qui peut permettre, par 
exemple, de definir des options dans un programme. 

Exemple 

Le script lance une boite de confirmation. La valeur renvoyee est mise dans la variable a. Si la valeur de a est true (if 
(a == true) ) une boite d'alerte s'affiche, si ce n'est pas le cas, une autre boite de dialogue s'affiche. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var a = confirm ( "Cliquez OK ou Annuler" ) ; 
if (a == true) { 

alert ("Vous avez clique OK"); 

> 

else { 

alert ("Vous avez clique Annuler"); 

} 

//]]> 
</script> 
</body> 
</html> 
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c. prompt() 

Dans le meme style que les precedentes methodes de I'objet window, JavaScript vous propose une autre boite de 
dialogue, appelee boite d'invite. El le est composee d'un champ comportant une entree a completer par I'utilisateur. 
Cette entree peut aussi posseder une valeur par defaut. 

La syntaxe est : 

prompt ( "texte de la boite d' invite "," valeur par defaut"); 

En cliquant sur OK, la methode renvoie la valeur encodee par I'utilisateur ou la valeur proposee par defaut. Si 
I'utilisateur clique sur Annuler, la valeur null est alors renvoyee. 

La methode prompt () est parfois utilisee pour saisir des donnees fournies par I'utilisateur. 
Exemple 

On va demander le prenom du visiteur par une boite d'invite et I'afficher sur la page Web. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var prenom = prompt ( "Encodez votre prenom", "Votre prenom ici"); 
document . write (" <h2>Bonj our " + prenom + "</h2>"); 

//] ]> 
</script> 
</body> 
</html> 



La boite d'invite : 



Invite utilisateur de Internet Explorer 



Invite de script : 
Encodez votre prenom 



OK 



Annuler 



Balthazar 



Le document Xhtml : 
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d. Une minuterie 

JavaScript met a votre disposition une minuterie (ou plus precisement un compte a rebours) qui permet de declencher 
une fonction apres un laps de temps determine. 

La syntaxe de mise en route du temporisateur est : 

nom_du_compteur = s e t T ime ou t < $ I [ ] s e t T ime ou t > ( " f onct i on_appe 1 ee ( ) " , temps en mil 
1 i seconde ) 

Ainsi, set Timeout ("demarrer ( ) ", 500 0) va lancer la fonction demarer o apres 5 secondes. 
Exemple 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function display (){ 

alert ( "Bon jour !") 

} 

//]}> 
</script> 
</head> 
<body> 

Cliquez le bouton.<br /> 

Une boite d' alerte apparaitra apres 3 secondes. 
<f orm> 

<input type="button" onclick="setTimeout (' display ()', 3000 ) " 

value="Cliquez ici"> 

</f orm> 

</body> 

</html> 
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Pour arreter le temporisateur avant I'expiration du delai fixe, il suffit d'utiliser la methodeciearTimeout 

(nom_du_compteur ) . 
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Conditions et boucles 



1. Les conditions if ... else 

Les langages de programmation n'echappent pas aux tests conditionnels. C'est ce qui en fait d'ailleurs une de leur 
richesse. 

L'expression if (si) permet d'executer ou non, une serie destructions en fonction du resultat d'un test. 

if (condition vraie) { 

une ou plusieurs instruction ( s ) ; 

} 

Si la condition est verifiee (true), les instructions s'executent. Si elle ne Test pas (false), les instructions ne s'executent 
pas et le programme passe a la commande suivante. 

Remarquons que les instructions sont comprises entre une accolade ouvrante et fermante. 
Voici une forme plus evoluee : 

if (condition vraie) { 

instructions 1; 

} 

else { 

instructions 2 ; 
} 

Si la condition est verifiee (true), le bloc destructions 1 s'execute. Sinon (else), soit lorsque la condition renvoie la 
valeur false, le bloc destructions 2 s'execute. 

Exemple 

Le visiteur entre un nombre compris entre 0 et 99. Le script annonce si le nombre encode est inferieur ou egal a 50 ou 
superieur a 50. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function test ( ) { 

var a = document . formulaire . input . value; 
if (a <= 50) { 

document . write ( a +" inferieur ou egal a 50"); 
} 

else { 

document . write ( a + " est superieur a 50"); 

} 

} 

//}]> 
</script> 
</head> 
<body> 

<form action="" name=" f ormulaire"> 

<input type="text" name="input" size="2" maxlength="2" value="" /> 

<input type="button" value="Tester " onclick="test ( ) " /> 

</f orm> 

</body> 

</html> 



• le formulaire comporte une ligne de texte limitee a 2 positions (voir maxiength="2") pour encoder un chiffre 
compris entre 0 et 99. 
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• en cliquant le bouton Tester, le visiteur appelle la fonction test() definie entre <head> . . . </head>. 

• dans la variable testo, la variable a, chiffre encode dans la zone de texte, est recuperee. Pour ce faire, le 
formulaire est identifie et la valeur de zone de texte, nommee input, est extraite (cf. ce chapitre - Notions 
fondamentales - Un peu de theorie objet). 

Ce Chemin S'ecrit en JavaScript, document . formulaire . input .value. 

• la condition "a inferieur ou egal a 50" (a <= 50) est testee ; 

• si cette condition est realisee, I'information "chiffre encode inferieur ou egal a 50" est ecrite dans le document. 

• si cette condition n'est pas realisee (else), I'information "chiffre encode est superieur a 50" est ecrite dans le 
document. 

• remarquez les deux accolades de fin. La premiere termine le test if ... else. La seconde termine la fonction test 
()■ 
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II est egalement possible de concevoir de multiples tests conditionnels. 



if (condition 1) { 

instruction ( s ) a executer si la condition 1 est vraie 
} 

else if (condition 2) { 

code a executer si la condition 2 est vraie 
} 

else 
{ 

code a executer si tous les tests sont faux 
} 



Pour ceux qui aiment les notations concises, on peut aussi ecrire : 

(expression) ? instruction a : instruction b 

Si I'expression entre parentheses est vraie, I'instruction a est executee. Si I'expression entre parentheses est fausse, 
c'est I'instruction b qui est executee. Remarquons le double point entre les deux instructions a et b. 



Le script precedent deviendrait alors : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

function test ( ) { 

var a = document . formulaire . input . value; 
if (a <= 50) { 

document . write ( a +" inferieur ou egal a 50"); 
} 

else { 

document .write (a + " est superieur a 50"); 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<form action="" name=" f ormulaire"> 

<input type="text" name="input" size="2" maxlength="2 " value="" /> 

<input type="button" value="Tester " onclick=" (document . formulaire . input . value <= 

50) ? document . write (document . formulaire . input . value + ' est inferieur ou egal a 

50') : document . write (document . formulaire . input . value + ' est superieur a 50')" 

</f orm> 
</body> 
</html> 



Le test conditionnel if ... else est un pilier du JavaScript et de la programmation. II sera frequemment utilise dans les 
scripts d'une certaine complexite. 



2. La boucle for 

L'expression for permet d'executer un bloc destructions un certain nombre de fois (boucle) en fonction de la realisation 
d'un certain critere. L'instruction for prevoit d'emblee un compteur et une condition pour I'interruption. 

La syntaxe generale est : 

for (valeur initiale ; condition ; progression) { 

instructions; 

} 

Prenons un exemple concret : 

for (i = 0; i<5; i + + ) { 
document . write ( i + "<br>") 
} 

Au premier passage, la variable i vaut 0 (sa valeur initiale). El le est bien inferieure a 5. Les instructions s'executent. La 
variable i est ensuite incrementee d'une unite par I'operateur decrementation i + + (i vaut alors 1) et la boucle for 
continue son execution. 

La variable i (qui vaut 1) est toujours inferieure a 5. L'instruction est a nouveau executee. La variable est augmentee 
de 1 par ('incrementation. 

Et ainsi de suite jusqu'a obtenir 5 pour i. La variable i ne remplit alors plus la condition i inferieur a 5. La boucle 
s'interrompt et le programme continue apres I'accolade de fermeture. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 
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<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

La boucle for : <br /> 

<script t ype=" text/ JavaScript "> 

//<! [CDATA [ 

for (i=0; i<5; i++) { 

document . write ( "Passage " + i + "<br>") 
} 

//] ]> 
</script> 
</body> 
</html> 
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Le piege de la mise en place des boucles est de concevoir une boucle qui ne s'arrete jamais (boucle infinie). Un 
message d'erreur apparait alors, pour que le navigateur rende la main. 



Windows Internet Explorer 



Arreter I'execution de ce script ? 

Un script present sur cette page ralentit Internet Explorer. 
S'il continue, votre ordinateur risque de cesser de 
reagir. 



[ Oui 1 



Non 



Cette instruction for est tres utilisee en JavaScript. 

3. La boucle while 

L'instruction while permet d'executer une instruction (ou un groupe destructions) un certain nombre de fois. 

while (condition vraie) { 

instruction (s) 

} 

Aussi longtemps que la condition est verifiee, JavaScript continue a executer les instructions entre les accolades. Une 
fois que la condition n'est plus verifiee, la boucle est interrompue et le script continue I'execution. 

Exemole 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
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"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

La boucle while : <br /> 

<script type="text / JavaScript "> 

//< ! [CDATA [ 

compt = 4 ; 

while (compt>=0) { 

document . write ( "Passage " + compt + "<br>"); 

compt — ; 

} 

//] ]> 
</script> 
</body> 
</html> 
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Le resultat est identique a I'instruction for. Dans la pratique, I'instruction for est souvent preferee a while car elle 
integre un compteur. 

Le risque de boucle infinie est d'autant plus present avec while que le concepteur doit creer et incrementer lui-meme le 
compteur. 



4. L'instruction break 

L'instruction break permet d'interrompre prematurement une boucle for ou while. 
Pour illustrer ceci, reprenons notre exemple : 



for (i=0; i<5; i++) { 

if (i == 3) 

break; 

document . write ( "Passage " + i + "<br>") 
} 

document . write (" fin de la boucle"); 

Le fonctionnement est semblable a I'exemple du point 2 sauf lorsque le compteur vaut 3. A ce moment, on sort de la 
boucle par l'instruction break et le message "fin de la boucle" s'affiche. 

Ce qui donne a I'ecran : 

ligne : 0 
ligne : 1 
ligne : 2 
fin de la boucle 
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5. L'instruction continue 



L'instruction continue permet de sauter une instruction dans une boucle for ou while et de continuer ensuite le 
bouclage (sans sortir de celui-ci comme le fait break). 



Soit I'exemple : 



compt=0 ; 




while (compt<5) 


{ 


if (compt == 3) 
{ 




compt ++ 




continue; 




} 

document .write 


("ligne : " + compt + "<br>"); 


compt ++ ; 
} 




document .write ( 


"fin de la boucle"); 



Ici, la boucle demarre. Lorsque le compteur vaut 3, l'instruction document, write ne s'execute pas grace a l'instruction 
continue (ligne : 3 n'est pas affiche) et la boucle poursuit son processus. Notons que compt a ete increments 
(compt+ + ) avant l'instruction continue pour eviter un bouclage infini et que le navigateur ne rende la main. 



Ce qui donne a I'ecran : 



ligne : 0 
ligne : 1 
ligne : 2 
ligne : 4 
fin de la boucle 
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Gestionnaires d'evenement 

Les gestionnaires d'evenement vont apporter I'element d'interactivite qui caracterise le JavaScript. Par leur intermediate, 
les actions du visiteur mettent en ceuvre les outils de programmation du JavaScript. 

La gestion de ces evenements (declenches generalement par I'internaute) fait le lien entre le langage Xhtml et le 
JavaScript. 

1. La notion d'evenement 

Passons en revue differents evenements implementes en JavaScript. Cette liste n'est cependant pas limitative. 

onAbort 

A I'arret du chargement de la page ou d'une image par le bouton "Stop" du navigateur. 

onBlur 

A la perte du focus par un element Html (generalement lorsqu'on quitte un element de formulaire). 

onClick 

Au die de la souris sur un element Html. 

onDbClick 

Au double die de la souris sur un element Html. 

onError 

A I'apparition d'une erreur dans la page. 

onFocus 

A la prise du focus d'un element de formulaire. 

onKeyDown 

A la pression d'une touche du clavier. 

onKeyUp 

Au relachement d'une touche du clavier qui a ete enfoncee. 

onKeyPress 

A I'encodage par une touche du clavier (combinaison de onKeyDown et onKeyUp). 

onload 

Au chargement de la page par le navigateur. 

onMouseDown 

A la pression du bouton de la souris. 

onMouseMove 

Au deplacement de la souris. 

onMouseOut 

A I'abandon d'un element Html par la souris. 
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onMouseOver 

Au survol d'un element Html par la souris. 

onMouseUp 

Au relachement du bouton de la souris (suite de onMouseDown) 

onMove 

Au deplacement de la fenetre. 

onReset 

Au die du bouton "reset" (bouton Annuler) d'un formulaire. 

onResize 

Au redimensionnement de la fenetre du navigateur. 

onScroll 

A I'utilisation de la barre de defilement. 

onSelect 

A la selection d'un texte dans un element Html. 

onSubmit 

Au die du bouton submit (bouton Envoyer) d'un formulaire. 

onUnLoad 

Au moment ou I'utilisateur quitte la page. 

Ces evenements peuvent etre associes a une multitude de balises que nous ne detaillons pas ici. 

C\ Ces gestionnaires d'evenements sont notes sous forme d'attributs dans les balises Html ou Xhtml. lis ont 
v d'ailleurs ete repris par le W3C dans les standards du Html 4.0 et du Xhtml 1.0. lis peuvent done etre notes dans 
le code, sans majuscule(s). C'est la convention que nous allons adopter par la suite. 

La syntaxe est : 

evenement = "f unction ( ) " 

Soit un evenement (ils commencent tous par "on"), le signe egal et la fonction associee par le concepteur, entouree 
par des apostrophes. 

Exemple 

one 1 i ck= " a 1 e r t ('Vous avez clique sur cet element' ) " 

De fagon litterale, au die de I'utilisateur, une boite d'alerte s'ouvre avec le message indique dans le script. 

2. L'evenement onClick 

Le die de la souris est un evenement frequemment utilise. II survient lorsque le visiteur clique, par exemple, un lien ou 
un element de formulaire. 

Exemple 

Au die du bouton, une boite d'alerte surgit. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 



- 2- 
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<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 
<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<form action=""> 

<input type="button" value="Cliquer ici" onclick="alert ( ' Vous avez 

clique ici' ) " /> 

</f orm> 

</body> 

</html> 
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Le die de la souris, dans le cas d'un lien par la balise <a> . . . </a>, est deja utilise par le Html ou le Xhtml pour 
atteindre la page specifiee. Pour associer une action JavaScript au die d'un lien, il a fallu introduire une notation 
particuliere du genre : 

<a href =" javascript :alert('Bonjour ! ' ) ; " >C1 ique r ici !</a> 

Ainsi dans I'attribut href, on indique au navigateur qu'il ne s'agit pas d'un lien mais d'une instruction JavaScript. D'ou la 
notation javascript, double point et I'instruction retenue. 

On rencontre aussi la notation : 

<a href = " javascript : void ( 0 ) " onclick = " alert ( ' Bon jour !'))"> Cliquer ici !</a> 

Pour passer outre a toute action a partir de I'attribut href, I'expression javascript : void (0) est ici utilisee. 



3. L'evenement onFocus 

Un evenement est genere lorsqu'un element est active, par exemple une ligne de texte d'un formulaire. 
Exemole 

Lorsque I'utilisateur clique dans une zone de texte, une inscription apparait dans celle-ci. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<form action="" name="form"> 
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<input name="tl" onf ocus="document . f orm . t 1 . value=' Entrez votre nom ici 
! ' " /xbr /> 

<input name="t2" onfocus=" document . form . t2 . value=' Entrez votre prenom 
ici ! ' " /> 

</f orm> 
</body> 
</html> 



Apres avoir clique dans la seconde ligne de texte, la capture d'ecran suivante est obtenue. 



r JavaScript - Windows Internet Ex... f^fo] X 



▼ 0 C:\Documents and 5e £ \ *t\ [X 



& & JavaScript 



fentrez votre prenom ici ! 



j Poste de travail 



+* 100% 



4. L'evenement onLoad et onUnLoad 



Au chargement {load) de la page ou a la sortie (onunload) de la page, des evenements sont generes. 
Exemole 

Un message d'accueil au chargement de la page et un autre message a la sortie de celle-ci. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body onload="alert ( ' Bienvenue !')" onunload="alert ( ' A bientot . . . ' ) "> 

<a href ="xxx . htm" >Page suivante</a> 

</body> 

</html> 



Ce script associe deux evenements dans la meme balise. Son ecriture est simple. II suffit d'encoder simplement les 
differents evenements a la suite, car ils sont, depuis le Html 4.0, consideres comme de simples attributs. 



- 4- 



© ENI Editions - All rigths reserved 



£2 JavaScript - Windows Internet Ex... f^lfnj X 



H 



'■ C:\Documents and Se v 



& ■& I £g JavaScript 



Page suivante 



Windows Internet Explorer 



□ 



Bienvenue 1 



OK 



; travail 



Windows Internet Explorer X 



t\ A bientot. 



5. L'evenement onMouseOver et onMouseOut 

L'evenement onMouseOver se produit lorsque le pointeur de la souris passe au-dessus d'un lien ou d'une image, sans 
cliquer dessus. 

L'evenement onMouseOut, generalement associe a un evenement onMouseOver, se produit lorsque le pointeur quitte la 
zone sensible (lien, image ou balise <div>). 

Exemple 

Ces deux evenements sont souvent utilises pour realiser un effet, desormais classique, d'affichage d'une autre image 
au survol de I'image originale par le pointeur de la souris. Cet effet porte le nom de rollover dans la documentation 
anglo-saxonne. 

II importe que la dimension des images concernees par le script soit rigoureusement identique en hauteur et largeur. 
Soit les images : 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 




"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 




<html xmlns="http : / /www . w3 . org/ 1 99 9/xhtml " xml : lang=" f r " lang=" 


fr"> 


<head> 




<title>JavaScript</title> 




<meta http-equiv="Content-Type" content="text/html" /> 




<meta http-equiv=" Content-Script-Type" content =" text / javascript 


" /> 


</head> 




<body> 




<img name="image" alt="mappemonde" src="mondel . png" onmouseover 


=" document . image . 


src=' monde2 . png' ; " onmouseout="document . image . src=' mondel . png' ; 


" /> 


</body> 




</html> 





La balise image <img> affiche I'image initiale mondel. png (src="mondei . png"). On a pris soin de donner un nom a cette 
balise image (name="image"). Au survol de la souris (onmouseover), I'image monde2.png apparait. Pour ce faire, on 
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indique a JavaScript qu'il doit chercher dans le document I'objet "image" et I'attribut src qui fournit I'adresse de la 
nouvelle image. Soit le chemin complet, document. image. src. Lorsque le pointeur de la souris quitte I'image 
(onmouseout), I'image originale revient. 
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6. L'evenement onSubmit 

L'evenement cree par le die sur le bouton d'envoi d'un formulaire peut judicieusement etre mis a profit pour, par 
exemple, effectuer des verifications concernant I'encodage des champs de ce formulaire. 

Exemple 

Ce script verifie si les champs du formulaire ont bien ete completes. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / javascript "> 

//<! [CDATA [ 

function verif () { 

a = document . formulaire . textel . value ; 

b = document . formulaire . texte2 . value ; 

c = document . formulaire . texte3 . value ; 

if ( (a && b && c) ==" " ) { 

alert ("Au moins un champ est vide !"); 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<form action="" name=" formulaire" onsubmit="verif ( ) "> 
<input name="textel" size="26" /><br /> 
<input name="texte2" size="26" /><br /> 
<input name="texte3 " size="26" /><br /> 
<input type=" submit " /> 
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</form> 
</body> 
</html> 



Au die du bouton d'envoi du formulaire, la fonction verif () est appelee (onsubmit="verif o ")■ Pour la lisibilite du script, 
la valeur des differentes lignes de texte du formulaire est sauvegardee dans une variable. L'acces a cette valeur 
s'effectue par I'ecriture du chemin desormais habituel document. formulaire. textex. value. Par un test conditionnel if, on 
verifie si une des lignes de texte est vide soit si a et b et c est vide (&& pour le et logique). Dans ce cas, une boite 
d'alerte apparait. 
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Formulaires 



Avec JavaScript, les formulaires Html ou Xhtml prennent une toute autre dimension. N'oublions pas qu'en JavaScript, on 
peut acceder a chaque element d'un formulaire pour y lire et/ou ecrire une valeur, par exemple. Tous ces elements 
renforcent les capacites interactives des pages Web. 



1. La ligne de texte 



La zone de texte est I'element d'entree/sortie par excellence de JavaScript. 
La ligne de texte est creee par la balise <input type="text" />. 
La ligne de texte possede trois proprietes : 



Propriete 


Description 


name 


Indique le nom du controle par lequel on pourra 
acceder. 


defaultvalue 


Indique la valeur par defaut qui sera affichee dans la 
zone de texte. 


value 


Indique la valeur en cours de la zone de texte. Soit 
celle encodee par I'utilisateur ou si celui-ci n'a pas 
rentre de valeur, la valeur par defaut. 



a. Lire une valeur 

Encoder une valeur dans la zone de texte et la reproduire dans une boite d'alerte. 
Le script complet est : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function controle ( formulaire ) { 

var test = document . formulaire . input . value; 

alert ("Vous avez encode : " + test); 

} 

//]}> 
</script> 
</head> 
<body> 

<form action="" name="formulaire"> 

<input type="text" name="input" value="" /><br /> 

<input type="button" value="Controler " onclick="controle (formulaire) " /> 

</f orm> 

</body> 

</html> 



Lorsque le bouton Controler est clique, JavaScript appelle la fonction controle o a laquelle le formulaire est transmis 

COmme argument onclick="controle (formulaire) ". 

Cette fonction, definie dans les balises <head>, prend sous la variable test, la valeur de la zone de texte var test = 
document. formulaire. input. value. Cette variable est alors fournie comme argument d'une boite d'alerte. 
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b. Reproduire une valeur 

Entrer une valeur quelconque dans la zone de texte d'entree. Afficher cette meme valeur dans la zone de texte de 
sortie apres avoir clique un bouton. 

Voici le code : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function af f icher ( f ormulaire ) { 

var testin =document . f ormulaire . input . value; 

document . f ormulaire . output . value=test in ; 

} 

//]}> 
</script> 
</head> 
<body> 

<form action="" name="formulaire"> 

<input type="text" name="input " value="" /> Zone de texte d'entree <br /> 

<input type="button" value="Aff icher " onclick="aff icher (formulaire) " /><br /> 

<input type="text" name="output" value="" /> Zone de texte de sortie 

</f orm> 

</body> 

</html> 



Lorsque le bouton Afficher est clique, JavaScript appelle la fonction afficher () a laquelle le formulaire est transmis 

COmme argument (onclick="af ficher (formulaire)"). 

Cette fonction afficher () prend sous la variable testin, la valeur de la zone de texte d'entree 

(document. formulaire. input. value). A I'instruction suivante, la variable testin est affectee a la valeur de la zone de 
texte de sortie en JavaScript : (document, formulaire. output, value = testin). 



- 2- 
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c. Tester un formulaire vide 



II est parfois imperatif qu'un element de formulaire soit rempli par le visiteur. Ce petit script teste si le visiteur a omis 
d'y encoder des donnees. 

Nous avons deja aborde cette problematique dans le chapitre precedent mais nous utilisons ici une autre fagon de 
proceder. 

Le script est : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function valider(){ 

input = document . form . entree . value . length; 
if (input == 0) { 
alert ("Vide !"); 

} 
> 

//]]> 
</script> 
</head> 
<body> 

<form action="" name="form"> 

Laissez le champ vide et testez : <br /> 

<input type="text" name="entree" size="25" value="" /><br /> 

<input type="button" value="Tester " onclick="valider ( ) " /> 

</f orm> 

</body> 

</html> 



La fonction vaiidero appelee par le die du bouton (onciick="vaiider () ") recupere dans la variable input, la 
longueur de ce qui est encode dans la zone de texte (input = document. form. entree. value. length). Si cette 
longueur est egale a 0 (input == o), I'utilisateur est averti par une boite d'alerte que la zone est vide. 
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d. Donner le focus 

II est souvent convivial de placer directement le curseur dans la premiere zone de texte d'un formulaire. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body onload="document . form. entree . focus ( ) ; "> 
<form action="" name="form" > 

<input type="text" name="entree" size="25" value="" /> 

</f orm> 

</body> 

</html> 



Au chargement de la page (evenement onload du body), le focus est donne a la zone de texte dont le chemin a ete 

determine par document . form, entree . 
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Le curseur est bien positionne directement dans la zone de texte. 

e. Encodage d'un nombre 

Certaines valeurs encodees ne peuvent comporter que des nombres. 
Ce script permet de le verifier. 
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La fonction JavaScript isNaN(argument) est utilisee 
nombre (NaN pour Not a Number). 

Le code devient : 



elle evalue I'argument pour determiner s'il ne s'agit pas d'un 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 




"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 




<html xmlns="http : / /www . w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 




<head> 




<title>JavaScript</title> 




<meta http-equiv="Content-Type" content="text/html " /> 




<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 




< script type="text / JavaScript "> 




//<! [CDATA [ 




function verif () { 




n=document . f orm . nombre . value ; 




if (isNaN (n) | n == 0) { 




alert ( "Entrer un nombre SVP !"); 




} 

else { 




alert ( "Entree valide"); 

} 




} 

//]]> 




</script> 




</head> 




<body> 




<form action="" name="form"> 




Code postal : <input type="text" name="nombre" size="3" maxlength="5" 


/xbr /> 


<pxinput type="button" name="bouton" value="Tester " onclick="verif ( ) 


" /><p> 


</f orm> 




</body> 




</html> 





Une zone de texte de 5 caracteres maximum (maxiength="5") est prevue pour I'encodage du code postal. Celui-ci doit 
comporter uniquement des chiffres et done doit pouvoir etre interprets comme un nombre. Le die sur le bouton Tester 
appelle la fonction verif o . 

Cette fonction initialise d'abord la variable n avec la valeur de la zone de texte dediee au code postal 
(document. form. nombre. value). Un test conditionnel (if) est effectue pour verifier si la valeur de n n'est pas un 
nombre (isNaN(n)) ou est vide (n == o). Dans ce cas, I'encodage du code postal est incorrect et une boite d'alerte 
invite le visiteur a entrer un nombre correct. Sinon, I'entree est valide. 



JavaScript - Windows Internet Ex. . 
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Code postal : 1 12345 



Tester 



5 



Windows Internet Explorer X 


Entree valide 




OK 









f. Calcul automatique 

Les zones de texte peuvent egalement etre utilisees pour recevoir des donnees ou contenir le resultat d'operations 
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effectuees par le script. 

Dans I'exemple suivant, nous allons demander au visiteur la quantite de produits commandes. Au die dans la zone de 
texte du prix total, celui-ci est automatiquement affiche. 

II est peut-etre preferable, a ce stade, de deja jeter un coup d'oeil a la capture d'ecran suivante. 



r i 

JavaScript - Windows Internet Explorer [^J|H X 


(Q ▼ ® C : \Documents and Se v 


1 1 1 X | Live Search 


W *r g| JavaScript 





Quantite 


Prix unitaire 


Prix total 








2,56 € 






€ 



L. 



Cliquez n'importe ou pour reinitialiser le tableau. 

^ Poste de travail \ 100% 



Le fichier devient 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

function calcul (form) { 
a = document . form . eleml . value; 
b= document . form . elem2 . value; 
document . form . elem3 . value = a* b; 

} 

function annul (form) { 
document . f orm . eleml . value=" " ; 
document . f orm . elem3 . value=" " ; 

} 

//]]> 
</script> 
</head> 
<body> 

<form action="" name="form"> 
<table border="l" width="300"> 
<tr> 

<td width="100"> 

<p align="center">Quantite</p> 

</td> 

<td width="100"> 

<p align="center">Prix unitaire</p> 

</td> 

<td width="100"> 

<p align="center">Prix total</p> 

</td> 

</tr> 

<tr> 

<td> 

<p align="center"xinput type="text" name="eleml" size="2" value="" /> 

</p> 

</td> 

<td> 

<p align="center"xinput type="hidden" name="elem2" value="2.56" />2,56 
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€</p> 
</td> 
<td> 

<p align="center"xinput type="text" name="elem3" size="5" value="" 

onf ocus="calcul (f orm) " onblur="annul (form) " /> €</p> 

</td> 

</tr> 
</table> 
</f orm> 

Cliquez n' import e ou pour reinitialiser le tableau. 

</body> 

</html> 



En cliquant dans la zone de texte du prix total, soit en donnant le focus, la fonction calculQ est appelee 

(onfocus="calcul (form) "). 

Dans cette fonction caicuio, la valeur encodee dans la zone de texte relative aux quantites (a = 
document. form. eiemi. value) est sauvegardee dans la variable a et la valeur du prix unitaire encodee dans I'element 
de formulaire cache <input type="hidden" /> (b = document. form. eiem2. value) est sauvegardee dans la variable b. 
La multiplication de a et de b donne le prix total affiche dans la zone de texte prevue a cet effet 

(document . form. elem3 . value = a * b). 

Nous nous sommes servi de ce script pour illustrer I'evenement onBlur. A la fin du script, la zone de texte du prix total 
a le focus. En cliquant n'importe ou dans la page, cette zone perd le focus. C'est ce que designe le terme de Blur. A 
cet evenement est associee la fonction annul(form) : onbiur="annui (form) ". 

Cette fonction remet une chaine de caracteres vides dans les deux zones de texte (document. form. eiemi. vaiue="" 
et document . form. eiem3 .vaiue=" ")■ Ce qui reinitialise le script. 
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▼ j£$ C:\Documents and Se v 




1 X | Live Search 


W <& JavaScript 


ft ' 





Quantite 


Prix unitaire 


Prix total 




12 




2,56 € 


1 30.72 


€ 



Cliquez n'importe ou pour reinitialiser le tableau. 



3/ Poste de travail 



\ 100% 



2. Les boutons de choix unique 



Les boutons de choix unique, appeles aussi boutons radio, sont utilises pour noter un choix, et seulement un seul , 
parmi un ensemble de propositions. 

Les boutons de choix unique sont crees par les balises <input type= "radio" />. 



Propriete 


Description 


name 


Indique le nom du controle. Tous les boutons portent 
le meme nom. 


index 


L'index ou le rang du bouton radio demarrant a 0. 


checked 


Indique I'etat en cours de I'element radio (selectionne 
ou non). 


defaultchecked 


Indique I'etat du bouton selectionne par defaut. 
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value 



Indique la valeur de I'element radio. 



Exemole 

Un formulaire renseignant le sexe du visiteur. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www. w3 . org/ 1 99 9/xhtml " xml : lang=" f r " lang="fr"> 

<head>> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type"Script-Type" content=" text / javascript " /> 
<script type="text / JavaScript "> 
//<! [CD ATA [ 

function ohoixsexe ( f orm) { 
if ( form . choix [ 0 ]. checked) { 

alert ("Vous avez choisi la proposition " + form. choix [0] .value) ; 
} 

if ( form . choix [ 1 ]. checked) { 

alert ("Vous avez choisi la proposition " + form. choix [1] .value) ; 



//]]> 
</script> 
</head> 
<body> 

Entrez votre choix : 
<form name="form" action=""> 
<input type="radio" name="choix" 
<input type="radio" name="choix" 



value=" 1 ' 
value="2 ' 



/>Sexe masculin<br /> 
/>Sexe feminin<br /> 



<pxinput type="button" value="Quel est votre choix ?" 

onclick="choixsexe ( f orm) " /></p> 

</f orm> 

</body> 

</html> 



Dans le formulaire nomme form, deux boutons radio sont declares. Notez que le meme nom est utilise pour les deux 
boutons. Ensuite, un bouton declenche par onclick la fonction choixsexe () . 

Cette fonction verifie le bouton radio coche. Ces donnees des boutons sont disponibles grace aux indices etablis par 
rapport au nom des boutons radio soit choix[0], choixfl]. La propriete checked du bouton est testee par if 
(form. choix [x] . checked) . Dans I'affirmative, une boite d'alerte s'affiche. Ce message reprend la valeur (voir value) 
attachee a chaque bouton par le chemin form. choix[x]. value. 
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" 1 0 C:\Documents and Se ^| | *f \ \ X 



Live 



ii & h@ JavaScript 



Entrez votre choix : 

0 Sexe masculin 
O Sexe feminin 



Windows Internet Explorer 



Quel est votre choix? 



•j Poste de travail 




100% 



3. Les boutons de choix multiples 

Les boutons de choix multiples (aussi appeles checkbox) sont utilises pour noter un ou plusieurs choix parmi un 
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ensemble de propositions. 

Les boutons de choix multiples sont crees par la balise <input type="checkbox" />. 



Propriete 


Description 


name 


TnH in i id 1 a n /~\ m H i i r> t - rri 1 o Tr\ i ihoc loc c o c a rnrhor 
1 1 1 U 1 Lj U t! 1 c I1UIII UU LUIILIUIc. 1 UULcb Icb Ldbcb a UULIIcl 

portent un nom different. 


checked 


Indique I'etat en cours de I'element case a cocher 
(selectionne ou non). 


defaultchecked 


Indique I'etat du bouton selectionne par defaut. 


value 


Indique la valeur de I'element case a cocher. 



Exemole 

Soit la question a choix multiples suivante : 



Selectionner les balises Html : 


- <hl> . 


. . </hl>. 


- <a> . . 


. </a>. 


- <op> . 


.. </op>. 


- <b> 


. </b>. 



La bonne reponse est la premiere, seconde et quatrieme proposition. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www. w3 . org/ 1 99 9/xhtml " xml : lang=" f r " lang="fr"> 

<head>> 

<title> JavaScript</title> 

<meta http-equiv="Content-Type"Script-Type" content=" text / javascript " /> 
< script type="text / JavaScript "> 
//<! [CDATA [ 

function choixsexe ( f orm) { 
if ( form . choix [ 0 ]. checked) { 

alert ("Vous avez choisi la proposition " + form. choix [0] .value) ; 
} 

if (form. choix [ 1 ]. checked) { 

alert("Vous avez choisi la proposition " + form. choix [ 1 ]. value) ; 

} 

} 

//]]> 
</script> 
</head> 
<body> 

Entrez votre choix : 

<form name="form" action=""> 

<input type="radio" name="choix" value="l" />Sexe masculin<br /> 

<input type="radio" name="choix" value="2" />Sexe feminin<br /> 

<pxinput type="button" value="Quel est votre choix ?" 

onclick="choixsexe (form) " /></p> 

</f orm> 

</body> 

</html> 



Dans le formulaire nomme form, quatre cases a cocher sont declarees. Notez qu'un nom different est utilise pour les 
quatre boutons. Vient ensuite un bouton qui declenche onclick la fonction reponse(). 

Cette fonction teste les cases a cocher selectionnees. Pour avoir la bonne reponse, il faut que les cases 1, 2 et 4 
soient cochees. Le nom des cases a cocher permet de les identifier, notamment la propriete checked du bouton par 
form. nom_de_ia_case. checked. Dans I'affirmative, la valeur renvoyee est true. Dans la negative, la valeur renvoyee est 
false. 

Un test conditionnel verifie par le "et logique" (&&) si les propositions 1, 2 et 4 sont vraies et la proposition 3 est 
fausse. Dans ce cas, une boite d'alerte s'affiche pour annoncer la bonne reponse. Dans la negative, une autre boite 
d'alerte invite a refaire le test. 
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Selectionnez les balises Html : 

0 <hl> ... <M> 
0 <a> ... < a> 
□ <op> ... < op> 
0 <b> ... <t» 



Corriger 



j Poste de travail 



Windows Internet Explorer 



U 



C'est la bonne reponse! 



OK 



«t 100% 



4. Le menu deroulant 

La liste de selection permet de proposer diverses options sous la forme d'un menu deroulant, dans lequel I'utilisateur 
peut selectionner une option. Une fois I'option selectionnee, elle reste alors affichee. 



Le menu deroulant est cree par la balise <seiect> . . . </seiect> et les elements de la liste par une ou plusieurs balise 

(s) <option> . . . </option>. 



Propriete 


Description 


name 


Indique le nom de la liste deroulante. 


length 


Indique le nombre d'elements de la liste. 


selectedlndex 


Indique le rang a partir de 0 de I'element de la liste 
qui a ete selectionne par I'utilisateur. 


defaultselected 


Indique I'element de la liste selectionne par defaut. 



Un exemple habituel : 

Une liste deroulante permet de choisir le navigateur. Les options proposees sont Internet Explorer, Firefox et autre. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function liste (form) { 

alert ("Le navigateur " + (form. list . selectedlndex + 1)); 
} 

//] ]> 
</script> 
</head> 
<body> 

Quel navigateur utilisez-vous ? 
<form name="form" action=""> 
<select name ="list"> 

<option value=" 1 " >Internet Explorer</option> 
<opt ion value=" 2 " >Firef ox</opt ion> 
<opt ion value=" 3 " >Aut re</opt ion> 
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</select> 

<input type="button" value="Reponse" onclick=" liste (form) " /> 

</f orm> 

</body> 

</html> 



Dans le formulaire nomme form, on declare une liste de selection par la balise <seiect> . . . </seiect>. Entre ces 
balises, on declare les differentes options de la liste par autant de balises <option> . . . </option>. Ensuite un bouton 
declenche la fonction liste (). Cette fonction fait ressortir I'option selectionnee. Le chemin complet de I'element 
selectionne est form, list . seiectedindex. Comme I'index commence a 0, il faut ajouter 1 pour obtenir le rang exact de 
I'element. 



r 

f- JavaScript - Windows Internet Ex 
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H 


BR 


& & JavaScript 


\ a- 





Quel na%igateur utiHsez-vous ? 



Firefox 


V 


Intern 


5t Explorer 


* 


Autre 





Reponse 



j Poste de travail 



Windows Internet Explorer 



Le navigateur 2 



OK 



, 100% 



5. Le bouton d'envoi 



Le bouton d'envoi, cree par la balise <input type="submit" />, permet de transmettre les donnees du formulaire selon 
les specifications de I'attribut action=" ..." de la balise <form>. 



Propriete 


Description 


name 


Indique le nom du controle. 


value 


Par defaut, le texte du bouton d'envoi est determine 
par votre navigateur, pour exemple Soumettre la 
requete sous Internet Explorer et Envoyer sous 
Firefox. II est cependant possible de personnaliser le 
texte par defaut du bouton par I'attribut 
value = "valeur". 


disabled 


Permet de desactiver le bouton d'envoi. 



6. Le bouton de reinitialisation 

II est utile de prevoir pour I'utilisateur la possibility d'annuler tout encodage effectue dans le formulaire et ainsi de 
reinitialiser (reset) un formulaire vierge. 

Cette operation est realisee par la balise <input type="reset" />. 

Tout comme pour le bouton de soumission, il est possible de modifier le texte par defaut du bouton par I'attribut 

value="valeur " . 



Les autres attributs sont identiques a ceux du bouton d'envoi. 
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7. Le bouton de commande 



Le bouton d'envoi et le bouton de reinitialisation, ont des fonctions bien definies par le langage Html ou Xhtml, ce sont 
respectivement les fonctions consistant a envoyer le formulaire selon les instructions definies par I'attribut action de la 
balise <form> ou a reinitialiser un formulaire vide d'encodage. 

II faut cependant prevoir des boutons dont la fonction pourrait etre definie par le concepteur de la page, generalement 
grace au JavaScript. 



Pour ce faire la balise <input type="button" /> (qui prise isolement ne fait rien) est utilisee. L'action est alors definie 
par un gestionnaire d'evenement, generalement du type onclick. 



Propriete 


Description 


name 


Avec I'attribut name="nom", vous pouvez attribuer un 
nom au bouton. C'est grace a ce nom que JavaScript 
peut acceder au bouton. 


value 


Permet de definir le texte du bouton. L'attribut value 
est, dans le cas present, obligatoire. 



Exemple 

Certains utilisateurs (impatients) ont la facheuse manie de cliquer plusieurs fois sur le bouton d'envoi. Ce script calmera 
leur ardeur. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

var nombreclic=0 ; 

function compteclic ( f orm) { 

nombreclic++; 

if (nombrecliol ) { 

alert ("Vous avez deja clique ce bouton. \nLe formulaire est en cours 

de traitement . " ) ; 

} 

} 

//}]> 

</script> 

</head> 

<form name="form" action=""> 

<input type="button" value="Cliquez-moi ! " 

onclick="compteclic (f orm) " /> 
</f orm> 
</body> 
</html> 



Au die du bouton d'envoi, la fonction compteclic o est appelee (compteclic (form) ). 

Cette fonction incremente d'une unite (nombreciic++) la variable nombreclic qui a ete prealablement initialisee a 0 (var 
nombreciic=o). Le script effectue alors un test (if) pour verifier si la variable nombreclic est superieure a 1 

(nombrecliol). Dans ce cas, une boite d'alerte S'affiche (alert ("Vous avez deja clique ce bouton)). 
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Live 



& JavaScript 



Cliquez-moi ! 



Windows Internet Explorer 



j\ Vous avez deja clique ce bouton. 

Le formulaire est en cours de traitement. 



OK 



•j Poste de travail 



+ x 100% » 



8. L'instruction this 

L'instruction this est un raccourci qui permet de referencer I'objet courant. El le est souvent utilisee lorsque du code 
JavaScript est utilise au sein d'une balise Html, ce qui permet alors de faire reference a I'objet defini par cette balise. 

Exemole 

<form name="form"> 

<input type="button" value="Cliquez-moi ! " 
onclick="compteclic (this . form) "> 
</f orm> 



OU 



<form name="form"> 

<input type="button" value="Cliquez-moi 
onclick="compteclic (this) "> 
</f orm> 
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Manipulation des chaines de caracteres 



L'objetstring permet de manipuler des chaines de caracteres. JavaScript met a la disposition du programmeur, une serie 
de proprietes et de methodes qui permettent de manipuler les caracteres de la chaine. 



La manipulation des caracteres est tres utilisee dans les applications AJAX. 



Instruction 


Description 


length 


Propriete qui renvoie un entier indiquant la longueur de 
la chaine de caracteres. 


cnarAt ( ) 


Methode qui permet d'acceder a un caractere isole 
d'une chaine. 


indexOf ( ) 


Methode qui renvoie la position d'une chaine partielle a 
partir d'une position determinee, en commencant au 
debut de la chaine, soit en position 0. 


±ast 1 ndexOr () 


Methode qui renvoie la position d'une chaine partielle a 
partir d'une position determinee, en commencant a la 
fin de la chaine, soit en position length - 1. 


subSt r ing ( x , y ) 


Methode qui renvoie une chaine partielle situee entre 
la position x et la position y-1. 


replace (x, y ) 


Remplace x par y. 


toLowerCase ( ) 


Transforme toutes les lettres en minuscules. 


toUpperCase ( ) 


Transforme toutes les lettres en majuscules. 



1. LengthQ 

La propriete length retourne un entier qui indique le nombre d'elements dans une chaine de caracteres. Si la chaine est 
vide (""), le nombre vaut zero. 

La syntaxe est simple : 

X = variable . length; 

X = ("chaine de caracteres") .length; 
Exemole 

Ce script verifie que les caracteres encodes dans une zone de texte ne depassent pas la limite fixee a huit caracteres. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

function valider(){ 

input = document . form . entree . value; 

if (input . length>8) { 

alert ( "Maximum 8 caracteres !"); 

} 

} 

//] ]> 

</script> 

</head> 
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<body> 

<form name="form" action=""> 

Entrez du texte (maximum 8 caracteres) : <br /> 

<input type="text" name="entree" size="25" value="" /> 

<pxinput type="button" value="Tester " onclick="valider ( ) " /></p> 

</f orm> 

</body> 

</html> 



La fonction vaiider() reprend d'abord dans la variable input la valeur de la zone de texte (input = 
document. form. entree. value). La longueur de la chaine de caracteres est fournie par la propriete length associee a la 
variable input (input . length) . Grace a un test, on verifie si cette longueur depasse les 8 caracteres, dans ce cas une 
boite d'alerte est declenchee. 



£ JavaScript - Windows Internet Ex... Qfn|[X 



0 C:\Documents andSef <t X 



Live 



JavaScript 



Entrez du texte (maximum 8 caracteres) : 



Editions Eni 



Tester 



Windows Internet Explorer | X 



Maximum 8 caracteres ! 



OK 



^ Poste de travail 



\ 100% 



II faut noter que la propriete length est valable pour les chaines de caracteres, mais aussi pour connaitre la longueur 
ou le nombre d'elements : 

■ de formulaires. Combien y a-t-il de formulaires differents dans le document ? 

• de boutons d'option. Combien y a-t-il de boutons radio dans le formulaire ? 

• de cases a cocher. Combien y a-t-il de cases a cocher dans le formulaire ? 

• d'options dans un menu deroulant. Combien y a-t-il d'options dans une balise <seiect> ? 

• de cadres, d'ancres, de liens, 

• etc. 



Exemole 

Ce script indique le nombre d'elements de formulaire presents dans le document Xhtml. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 
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<form name="form" action=""> 

Norn : <input type="text" size="25" /><br /> 

Prenom : <input type="text" size="25" /><br /> 

Adresse : <input type="text" size="25" /><br /> 

Code Postal : <input type="text" size="25" /><br /> 

Ville : <input type="text" size="25" /> 

</f orm> 

<script type="text / JavaScript "> 
//<! [CD ATA [ 

a="Ce document contient " + document . form. length + " elements de 
f ormulaires . " ; 
document .write (a) ; 

//] ]> 
</script> 
</body> 
</html> 
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& g§ JavaScript 



Nom 
Prenom : 
Adresse : 
Code Postal : 
Vie 



Ce document contient 5 elements de formulaire. 

j Poste de travail "\ 100% » 



2. charAtQ 

La methode chartAto retourne la lettre ou le signe qui occupe une position determinee dans une chame de 
caracteres. II faut lui fournir en parametre la position souhaitee. 

II faut d'abord noter que les caracteres sont comptes de gauche a droite et que la position du premier caractere est 0. 
La position du dernier caractere est done la longueur totale {length) de la chame de caractere moins 1; 

Chaine : JavaScript 

position : 0123456789 (dernier caractere = 9 soit longueur totale - 1) 

Si la position indiquee en parametre est inferieure a zero ou plus grande que la longueur moins 1, JavaScript retourne 
une chaine vide. 

La syntaxe de charAt o est : 

resultat = cha i ne_depa r t . charAt ( x ) ; 

ou x est un entier compris entre 0 et la longueur de la chaine a analyser moins 1. 
Notez les exemples suivants : 

var chaine=" Javascript "; 
resultat=chaine. charAt (0) ; 
resultat=" Javascript" .charAt (0) ; 

La reponse est "J" 
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var s t r = " Javascript"; 
var chr = str. cha r At ( 9 ) ; 
var chr = charAt (str, 9) ; 



La reponse est "t" 
Exemple 

Ce script retourne la lettre en 5eme position. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function valider() { 

var x=document . form . texte . value ; 

var a=x . charAt ( 4 ) ; 

alert ("La 5eme lettre est " +a) ; 

} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 
Entrez votre texte :<br /> 

<input type="text" name="texte" size="30" /><br /> 

<input type="button" value="Tester " onclick="valider ( ) " /> 

</f orm> 

</body> 

</html> 



Le texte encode dans la zone de texte est sauvegarde dans la variable x. La methode charAt est appliquee a cette 
derniere (x. charAt (4) ). Notez le parametre 4 qui correspond en JavaScript a la 5eme position. 
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Editions Eni 
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Windows Internet Explorer X 



La 5eme lettre est i 



OK 



'J Poste de travail 



\ 100% 



3. indexOf() 

Cette methode indexof () retourne la position d'une chame partielle (lettre unique, groupe de lettres ou mot) dans une 
chalne de caracteres. Cette chaine partielle est transmise en parametre. 
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II est possible, mais facultatif et peu retenu dans la pratique, de transmettre comme second parametre la position a 
partir de laquelle la recherche doit commencer. S'il n'est pas specifie, la recherche commence a la position 0. 

Pour chercher I'arobase dans une chaine de caracteres, la syntaxe est : 

variable="chaine_de_caracteres"; 
x=variable.indexOf("@") ; 

Commentaires : 

• la position retournee est celle de la premiere occurrence de la chaine partielle dans la chaine de caracteres. 

• si la chaine partielle n'est pas trouvee dans la chaine de caracteres a analyser, la valeur retournee est egale a 
-1. 

Exemole 

Ce script teste si une adresse e-mail contient le signe @. II notifiera un message d'alerte si le signe @ n'est pas trouve 
(soit valeur -1). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

function valider() { 

var a=document . form . email . value . indexOf ( " @ " ) ; 
if (a == -1) { 

alert ( "Adresse email invalide"); 
} 

else { 

alert ("OK") ; 

} 

} 

//}]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

Entrez votre adresse e-mail : <br /> 

<input type="text" name="email" size="30" /><br /> 

<input type="button" value="Tester " onclick="valider ( ) " /> 

</f orm> 

</body> 

</html> 



L'adresse e-mail est fournie par document. form. email. value. La methode indexOf est appliquee avec le signe @ a 
rechercher transmis en parametre. Si I'arobase a ete trouvee, la methode retourne sa position qui ne peut etre qu'un 
chiffre positif. Si la position retournee vaut -1, cela indique que I'arobase n'a pas ete trouvee et que l'adresse e-mail 
n'est done pas valide. 
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JavaScript 



Entrez votre adresse e-mail : 



eeazeazeaeae 



Tester 



Windows Internet Explorer 



jj\ Adresse email invalide 



OK 



J Poste de travail 



\ 100% ' 



Ce test est assez sommaire et peut etre affine. Outre I'arobase, une adresse e-mail contient egalement au moins un 
point. Le script suivant va tester la presence du point et ne declarer l'e-mail valide que si les deux conditions sont 
remplies. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CD ATA [ 

function valider() { 

var a=document . form . email . value . indexOf ( " @ " ) ; 
if (a == -1) { 

alert ( "Adresse email invalide"); 
} 

else { 

alert ("OK") ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

Entrez votre adresse e-mail : <br /> 

<input type="text" name="email" size="30" /><br /> 

<input type="button" value="Tester " onclick="valider ( ) " /> 

</f orm> 

</body> 

</html> 



Dans la variable a, on obtient la position du signe @ ou son absence (-1). Idem pour la variable b qui fournit la position 
du point ou son absence (-1). L'absence de I'arobase ou du point determine I'adresse e-mail non valide. 

Pour des procedures de validation de formulaires plus sophistiquees, reportez-vous au point Les expressions de cette 
section. 



4. LastlndexOfQ 



Cette methode ressemble fortement a indexOf () sauf que la recherche s'effectue cette fois de droite a gauche (en 
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commengant done par la fin). 

Notons que meme lorsque la recherche s'effectue a partir de la fin de la chaine, la position retournee est numerotee 
depuis le debut de la chaine avec la numerotation commengant a zero. 

x = variable . lastlndexOf ( cha i ne_pa r t i e 1 1 e ) ; 

Les exemples suivants montrent la difference entre indexOfQ et lastlndexOfQ : 
Soit variabie="Javascript". On recherche la position de la lettre a. 

x = variable . indexOf (a) retOUrne la position 1. 

x=variabie. lastlndexOf (a) retourne la position 3 (pour le second a). 
Cette methode est peu utilisee dans la pratique. 



5. Substring() 

La methode substring o sera particulierement utile pour extraire des donnees d'une chaine de caracteres. 

La syntaxe est substrings, y) ou x designe la position du premier signe a extraire dans la chaine de caracteres et y la 
position du premier signe ne devant plus etre extrait de la chaine de caracteres. Pour rappel, la numerotation 
commence a 0. 

Si x est egal a y, substringQ retourne (logiquement) une chaine vide. 
Voici quelques exemples : 

Javascript 



str=" Javascript"; 
strl=str.substring(0,4) ; 
str2 = str.s ub string (6, 9 ) ; 
str3=str . substring (7, 10) ; 

Les resultats sont : 

strl="Java"; soit les positions 0,1, 2 et 3. 
str2="rip"; soit les positions 6, 7 et 8. 
str3="ipt" soit les positions 7, 8 et 9. 

Exemole 

Retrouver les deux premiers chiffres d'un code postal. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script t ype=" text/ JavaScript "> 

//<! [CD ATA [ 

function extraire () { 

dep = document . form . cp . value; 

dep = dep. substring (0, 2) ; 

alert (dep) ; 

document . form . cp . value = ""; 
} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 
Code postal : 

<input type="text" name="cp" size="3" maxlength="5" /><br /> 
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<pxinput type="button" name="bouton" value="Tester " 

onclick="extraire ( ) " /></p> 

</f orm> 

</body> 

</html> 



La fonction extraire ( ) recupere les 5 ch iff res du code postal encode dans la zone de texte (document . form.cp. value) . 
Les deux premiers chiffres sont extraits (dep. substrings, 2)) et sont affiches dans une boite d'alerte. 

La zone de texte est reinitialisee a 0 par document. form.cp. value = "". 
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6. toLowerCase() 

Cette methode transforme tous les caracteres (majuscules ou minuscules) d'une chaine de caracteres en minuscules. 

va r i ab 1 e= " cha 1 ne de caracteres"; 
x=variable.toLowerCase() ; 

Exemole 

str="JavaScript"; 

strl = str.toLowerCase () ; 

Le resultat sera : 

s t r 1 = " javascript"; 



7. toUpperCase() 

Cette methode transforme les caracteres (majuscules ou minuscules) d'une chaine de caracteres en majuscules. 

va r i ab 1 e= " chai ne de caracteres"; 
x=variable.toUpperCase() ; 

Exemple 

str="JavaScript"; 

str2 = str.toUpperCase () ; 



Le resultat sera : 
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str2=" JAVASCRIPT" ; 



Exemole 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 




"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 




<html xmlns="http : / /www . w3 . org/ 1 99 9/xhtml " xml : lang=" f r " lang=" 


f r"> 


<head> 




<title>JavaScript</title> 




<meta http-equiv="Content-Type" content="text/html" /> 




<Cmp t a Vi 1 1 n — eon i v='Tnnfpnf — Srri — Tutip " rnntpnf="hpyt / isvs ^rri 

^1 1 L- O 11 L U d U_LV ^ — U11UC11L .J 1— ^ -1- M 1- J £-*^ ^ UU111.C11L. UC^L-/ IdVdOl^^-L M L- 


" /> 


< script t ype=" text/ JavaScript "> 




//<! [CD ATA [ 




function minuscules () { 




— iH^/^iimoril - f~ r\ "Km l i 1 z$ ~\ v dhI" tod ir3 1 nci f nT nuo tP^i c; q ( \ * 
Cl — L-lUL-LlllltillL. • -LC-LlllLlXcl-L-Lt; • trill Ltiti - V cl X U. t; • LUiiUWciUaoC 1, ) f 




document . formulaire . sortie . value = a; 
} 




function majuscules () { 




a = document . formulaire . entree . value . toUpperCase () ; 




document . formulaire . sortie . value = a; 




} 

//] ]> 




</script> 




</head> 




<body> 




<form name=" formulaire " action=""> 




Encodez des minuscules et des ma juscules . <br /> 




<input name="entree" size="30" /><br /> 




<input type="button" value="Minuscules " onclick="minuscules ( ) " 


/> 


<input type="button" value="Ma juscules" onclick="ma juscules () " 


/> 


<br /> 




<input name="sortie" size="30" /> 




</f orm> 




</body> 




</html> 





Pour la fonction minuscules o , la variable a repris le contenu de la zone de texte d'entree 

(document . formulaire . entree .value) auquel la methode toLowerCase ( ) est appliquee. Le resultat est renvoye dans la 
zone de texte de sortie (document. formulaire. sortie. value). 

Pour la fonction majuscules o , la variable a repris le contenu de la zone de texte d'entree 

(document . formulaire . entree .value) auquel la methode toUpperCase ( ) est appliquee. Le resultat est renvoye dans la 
zone de texte de sortie (document. formulaire. sortie. value). 
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8. replace() 
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La methode replace(x,y) remplace les caracteres x dans la chaine de caracteres par y. 

II est important de noter que le premier parametre est defini entre deux barres obliques /. 



str="Je programme en PHP"; 

st r=s tr . replace (/PHP/, "JavaScript") 

Le resultat est : "Je programme en JavaScript". 

II faut noter que la methode replace(x,y) ne va remplacer que la premiere occurrence des caracteres correspondant a x 
dans la chaine de caracteres. 

Pour remplacer toutes les occurrences dans la chaine de caracteres, il faut adopter la notation suivante : 

s t r = s t r . replace (/PHP/g, "JavaScript") ; 

Exemole 

JavaScript retourne une chaine de caracteres initiale "janvier, fevrier, mars,avrii". 

Pour afficher une presentation plus conviviale avec les memes termes separes par des espaces "janvier, fevrier, mars, 
avril", il suffit de remplacer toutes les chaines virgules par les chaines virgule espace. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

chaine=" janvier , fevrier, mar s , avril , mai " 

chaine=chaine . replace ( /, /g, " , " ) ; 

document .write ( chaine) ; 

//] ]> 

</script> 

</head> 

<body> 

</body> 

</html> 
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9. Les expressions regulieres 

Les methodes de manipulation de caracteres de I'objet String (JavaScript 1.1) decrites plus haut se sont rapidement 
revelees trop limitees. 

On a introduit alors en JavaScript les expressions regulieres et I'objet RegExp (JavaScript 1.2) qui comportent des 
criteres de recherche plus sophistiques et qui, en outre, permettent de modifier de fagon dynamique des chaines de 
caracteres pendant I'execution du script. 

Pour cela, il vous faut definir une instance de I'objet RegExp. C'est ce qu'on appellera une expression reguliere. Les 
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elements de cette expression reguliere sont inclus dans des barres obliques. Les differents elements sont separes par 
une virgule. 

a. Declaration 

La creation d'un objet RegExp se cree a I'aide de la syntaxe suivante : 

expression = /critere/; 

II est egalement possible de creer un tel objet de maniere plus classique a I'aide de son constructeur : 

expr e s sion = new RegExp ("critere"); 

On peut de plus, preciser le comportement de I'expression reguliere de fagon optionnelle par : 

• g qui indique une recherche globale de toutes les occurrences. 

• i pour une recherche non sensible a la casse, soit independamment de la presence de majuscule ou 
minuscule dans la chaine. 

• gi qui combine les deux. 

expression = /critere/g; 

expression = new RegExp (" critere "," i ") ; 

b. Syntaxe 

Les expressions regulieres, issues du langage de programmation Perl, en reprennent la concision mais aussi la 
complexite... 

Le tableau suivant presente une liste de composants pour former une expression reguliere. 



Caractere 


Description 


xyz 


Trouve xyz n'importe ou dans la chaine de caracteres. 


"xyz 


Trouve xyz au debut de la chaine de caracteres. 


xyz$ 


Trouve xyz a la fin de la chaine de caracteres. 


xyz * 


Trouve xy suivi de zero ou plusieurs z. 


xy z + 


Trouve xy suivi de un ou plusieurs z. 


xyz ? 


Trouve xy suivi de zero ou un seul z. 


. xyz 


Trouve xyz precede d'un caractere joker. 


. +xyz 


Trouve xyz precede de plusieurs caracteres joker. 


\bxyz \b 


Trouve xyz en tant que mot distinct. 


\Bxyz\B 


Trouve uniquement xyz a I'interieur de mots. 


x I y 


Trouve x ou y. 


[xyz ] 


Trouve x ou y ou z. 


[a-z] 


Trouve n'importe quel caractere de a a z (alphabet 
ASCII, soit sans caracteres accentues). 
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[0-9] 


Trouve n'importe quel chiffre de 0 a 9. 


x{n} 


Trouve x exactement n fois. 


x{n, } 


Trouve x au moins n fois. 


x { n , m } 


Trouve x entre n et m fois. 



Pour rechercher un caractere faisant partie des caracteres speciaux, il suffit de le faire preceder d'une barre oblique 
inverse. 



Caractere special 


Notation 


\ 


\\ 




V 


$ 


\$ 


[ 


\[ 


] 


\] 


( 


\( 


) 


\) 


{ 


\{ 


> 


\> 




\ A 


? 


\? 


* 


\* 


++ 


\+ 




V 



On note egalement : 



Caractere 


Description 


\f 


Trouve un signe de saut de page. 


\n 


Trouve un saut de ligne. 


\r 


Trouve un retour chariot. 


\t 


Trouve une tabulation horizontale. 


\v 


Trouve une tabulation verticale. 


\s 


Trouve toute sorte d'espace vide done espace, retour 
chariot, tabulation, saut de ligne, saut de page. 


\s 


Trouve un caractere quelconque qui ne soit pas un 
espace vide. 
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\ w 


Trouve tous les caracteres alphanumeriques 
f minu^nilp^ oil maiii^nilpO ain^i nnp lp firpt Hp 

M I III IK jLU ICj UU 1 1 IQJUOI.UICJ 1 C1III3I U UC IC III CL u c 

soulignement. 


\w 


Trouve tous les caracteres non alphanumeriques. 


\d 


Trnnvp tniic; Ipc rarpirr'Prpc; ni irnprini ipc; cnit rhiffrp Hp 

0 a 9. 


\D 


Trouve tous les caracteres non numeriques. 



Exemple 1 

Un nombre (entier ou decimal). 

var reg = / A \d+ [ . ] ?\d*$/ ; 



• le signe A signale que Ton commence au debut de la chaine de caracteres. 

• \d+ pour plusieurs caracteres numeriques. 

• [ . ] ? pour zero ou une fois un point decimal. 

• \d* pour zero ou plusieurs caracteres numeriques. 

• $ pour fin du nombre. 
Exemple 2 

Login valide de 3 a 8 caracteres (numeriques ou alphanumeriques, majuscules ou minuscules) sans caracteres 
speciaux. 

var exp=new RegExp("" [a-zA-ZO-9] {3,8}$") ; 

• le signe A signale que Ton commence au debut de la chaine de caracteres. 

• [a-zA-zo-9] note que les caracteres alphanumeriques peuvent etre en minuscule de a a z, en majuscules de 
AaZet des chiffres de 0 a 9. 

• {3,8} verifie si la chaine comporte entre 3 et 8 caracteres. 

• $ signale la fin de la chaine de caracteres et interdit tout caracteres supplementaires. 



c. Methodes 

Certaines methodes de I'objet String peuvent utiliser les expressions regulieres. 



Methode 


Description 


match ( ) 


Effectue une recherche de correspondance dans une 
chaine. El le renvoie un tableau de valeurs ou null en 
cas d'echec. 


replace ( ) 


Effectue une recherche de correspondance dans une 
chaine et remplace la sous-chaine capturee par la 
chaine de remplacement. 


split () 


Utilise une expression rationnelle ou une chaine pour 
diviser une chaine en un tableau de sous-chaines. 



Par ailleurs I'objet RegExp possede certaines methodes qui lui sont propres. 
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Methode 


Description 


exec ( ) 


Effectue une recherche de correspondance dans une 
chaine. El le renvoie un tableau de valeurs. 


test ( ) 


Teste la correspondance d une chaine. Elle renvoie la 
valeur true ou false. 


search ( ) 


Teste la correspondance d'une chaine. Elle renvoie 
I'index de la capture, ou -1 en cas d'echec. 



Exemple avec solitO 

Soit une liste de noms dont les separateurs ne sont pas uniformes : " abc ,def ; hij klm - nop". Isolons tous les noms 
de cette liste. 

L'expression reguliere va prevoir des separateurs sous forme de virgule, point-virgule, double point, tiret, un ou des 
espaces. Celle-ci devient : 



var expression=new RegExp ("[,;: - ] + " , " g " ) ; 

Le code complet devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www.w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title> JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CD ATA [ 

function extraire ( f orm) { 

var test=document . f orm . exemple . value ; 

var expression = new RegExp ("[,:; - ]+"," g" ) ; 

var tableau = test . split (expression) ; 

var affichage = "Nombre de noms trouves = " + tableau . length + "\n"; 

for (var i=0 ; i<tableau . length; i++ ) { 

af f ichage=af f ichage + " ["+ tableau[i] + "]\n"; 

} 

alert (affichage) ; 
} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

<input type="text" name="exemple" size="30" value="abc , def ; hij 
klm - nop"/> 

<pxinput type="button" value="Trouver les mots" 

onclick="extraire (form) " /></p> 

</f orm> 

</body> 

</html> 
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Windows Internet Explorer 
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& <& I JavaScript 



abc . def ; hij klm-nop: qrs 



Trouver les mots 



'j Poste de travail 



Nombre de norms trouves = 6 

[abc] 

[def] 

[hij] 

[Mm] 

[nop] 

[qrs] 



OK 



Exemole avec matchO 

Continuons sur le meme theme en utilisant la methode match o pour isoler les mots d'une phrase. 

L'expression reguliere doit reconnaitre tous les caracteres alphanumeriques, en majuscules ou minuscules, de la 
chaine de caracteres. II est prudent de prevoir quelques caracteres accentues. 

var expression = new RegExp ( " [a-zA-Zeeagui\-] +" , "gi" ) ; 



Le code complet devient 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function extraire ( f orm) { 

var test=document . form . exemple . value ; 

var expression=new RegExp (" [a-zA-Zeeacui\- ]+", "gi ") ; 

var tableau=test . match (expression) ; 

var af f ichage="Nombre de noms trouves = " + tableau . length + "\n"; 

for (var i=0 ; i<tableau . length; i++ ) { 

af f ichage=af f ichage + " ["+ tableau[i] + "]\n"; 

} 

alert (af fichage) ; 

} 

//]}> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

<input type="text" name="exemple" size="30" value="Loic est un gargon 
bien eleve"/> 

<pxinput type="button" value="Trouver les mots" 

onclick="extraire (form) " /></p> 

</f orm> 

</body> 

</html> 
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Exemple avec testf) 

Parmi les methodes de I'objet RegExp, la methode expression. test("chame") est assurement la plus utilisee. El le 
teste une chaine de caracteres selon les criteres de I'expression reguliere. Cette methode retourne true si la 
recherche est fructueuse et false dans le cas contraire. 

Appliquons-la a la verification de la validite d'une adresse email. 

Une adresse e-mail comporte toujours le signe @ et un point pour le nom du serveur. 



exp = new RegExp ( " @ . " ) ; 



C'est un peu simpliste. Entre I'arobase et le point, il doit y avoir quelques caracteres (au moins 2). De plus, apres le 
point, il doit avoir deux, trois ou quatre caracteres pour le nom de domaine. 

exp = new RegExp ( " @ [ a- z ] { 2 , } [ . ] [ a- z ] { 2 , 4 } $ " ) ; 

Le signe $ signifie la fin de I'e-mail. 

II y a bien entendu des caracteres (ici en minuscules) avant I'arobase. La presence du point, du tiret ou du 
soulignement est egalement prevue. 

exp = new RegExp ( " A [ a- z 0 - 9 . -_] + @ [ a- z ] { 2 , } [ . ] [ a-z ] { 2 , 4 } $ " ) ; 

Le signe A fait demarrer le test depuis le debut de la chaine. 
Certains ont encore des majuscules dans leur adresse. 

exp = new RegExp ( " " [ a- z 0 - 9 . -_] + @ [ a- z ] { 2 , } [ . ] [ a-z ] { 2 , 4 } $ " , " i " ) ; 

L'equivalent de cette expression reguliere en JavaScript "classique" aurait reclame de nombreuses lignes de code. 
Le code devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function trouver () { 

var exp = new RegExp (" A [a-zO-9. -_] +@ [a-z] { 2 , } [ . ] [a-z ] { 2 , 4 } $ " , "i " ) ; 
var email = document . form. mail .value; 
if (exp . test (email ) ) { 
alert ( "Adresse valide"); 

} 
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else { 

alert ("Non valide"); 
document . f orm . mail . value=" " ; 

} 
} 

//] ]> 
</script> 
</head> 
<body> 

<form action="" name="form"> 
Adresse email valide <br /> 

<input type="text" name="mail" size="25" /><br /> 

<input type="button" value="test email" onclick="trouver ( ) " /> 

</f orm> 

</body> 
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La verification de la validite des adresses de courrier electronique peut egalement se realiser avec I'expression 
reguliere suivante, aussi efficace mais a priori assez hermetique. 

RegExp ( " A \ \w [ \ \ w\ -\_\ . ] * \ \w§ \ \ w [ \ \w\ -\_\ . ] * \ \ w\ \ . \ \ w { 2 , 4 } $ " ) ; 
A \\w 

un caractere au debut de I'e-mail. 

[\\w\-\_\.]* 

ensuite une serie de caracteres avec eventuellement un tiret, un soulignement et un point. 

\\w 

un caractere seul devant I'arobase. 

@@ 

le signe arobase. 

\\w 

un caractere seul. 

[\\w\-\_\.]* 

divers caracteres avec eventuellement un tiret, un soulignement et un point. 

\\w 

un caractere pour finir cette serie. 

\\. 
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un point. 

\\w{2,4) 

de deux a quatre caracteres pour le nom de domaine. 

$ 

fin de la chaine. 

Une expression reguliere peut meme etre prevue pour s'assurer qu'il n'y a pas de signes interdits dans I'adresse. 

var illegal = new RegExp ( " [ \ ( \ ) , ; : aee \ ']+"," g ") ; 

On interdit ici les caracteres les parentheses ouvrante et fermantes, la virgule, le point-virgule, le double point, 
I'espace des caracteres accentues et I'apostrophe. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http: //www.w3 . org/ 1 9 9 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function trouverf) { 

var illegal = new RegExp ( " [ \ ( \ ) , ; : aee\ ' ] + " , "g" ) ; 

var exp = new RegExp ( " A \\w [ \\w\-\_\ .] *\\w@\\w [ \\w\-\_\ .] *\\w\\ . \\w{2, 4 } 

$") ; 

var email = document . form. mail .value; 
if (illegal . test (email) ==false) { 
if (exp . test (email ) ==true) { 
alert ( "Adresse valide"); 

} 
} 

else { 

alert ( "Recommencez " ) ; 
document . f orm . mail . value=" " ; 

} 
} 

//] ]> 
</script> 
</head> 
<body> 

<form action="" name="form"> 
Adresse email valide <br /> 

-cinput type="text" name="mail" size="25" /><br /> 

<input type="button" value="test email" onclick="trouver ( ) " /> 

</f orm> 

</body> 

</html> 
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Tableaux en JavaScript (objet Array) 

L'objet Array permet de lister une serie de valeurs dans une seule variable. Les differents elements sont identifies par 
un nombre entier representant leurs positions. Ce nombre est appele un index. L'objet Array permet ainsi de creer des 
variables dites indicees ou indexees. 

L'index commence (comme souvent en JavaScript) a la valeur 0. 
Exemple 



semaine 


0 


Lundi 


1 


Mardi 


2 


Mercredi 


3 


Jeudi 


4 


Vendredi 


5 


Samedi 


6 


Dimanche 



La variable indexee semaine contient comme valeurs, les differents jours de la semaine. 

Ces variables indexees peuvent etre identifies en JavaScript (comme dans d'autres langages de programmation) sous 
le vocable de tableau. 

O Les tableaux en JavaScript n'ont rien en commun avec les tableaux du langage Html ou Xhtml. A ne pas 
^ confondre ! 



1. La definition d'un tableau 

La creation d'un objet de type Array s'opere a I'aide de I'operateur new suivi de ArrayQ. 

var tableau = new Array ( ) ; 
Commentaires : 

• en JavaScript, il faut d'abord definir le tableau avant de pouvoir en preciser son contenu. 

• il n'est pas obligatoire de definir la taille du tableau dans sa declaration (par exemple var tableau = new Array 
(7) . La taille des tableaux est prise en charge de fagon dynamique par JavaScript. 

• il est possible, a tout moment, de connaitre la taille d'un tableau, en invoquant la propriete length de l'objet 
correspondant a ce tableau. 

Notre tableau avec les jours de la semaine, peut se definir comme suit : 

var semaine = new Array ( ) ; 

2. L'initialisation d'un tableau 

Pour initialiser le tableau, la syntaxe suivante est utilisee : 
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tableau [i] = element; ou i est un nombre compris entre 0 et la longueur du tableau -1. 
Soit pour le tableau semaine : 



var semaine 

semaine [ 0 ] = 

semaine [ 1 ] = 

semaine [ 2 ] = 

semaine [ 3 ] = 

semaine [ 4 ] = 

semaine [ 5 ] = 

semaine [ 6 ] = 



= new Array ( ) 
"Lundi"; 
"Mardi " ; 
"Mercredi " ; 
" J e u d i " ; 
" Vendredi " ; 
" Samedi " ; 
" D imanche " ; 



La definition et ('initialisation peuvent se faire lors de la meme instruction sous la forme 



var semaine = new Array ( "Lundi " , "Mardi" 
"Vendredi" , "Samedi" , "Dimanche") ; 



"Mercredi " 



" Jeudi" 



3. L'acces aux donnees du tableau 

On accede a un element du tableau, par le nom du tableau et le numero de I'indice. 

Soit, semaine [0] pour "Lundi". 

Exemole 

Afficher les elements du tableau semaine. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var semaine = new Array (); 
semaine [0] = "Lundi"; 
semaine [1] = "Mardi"; 
semaine [2] = "Mercredi"; 
semaine [3] = "Jeudi"; 
semaine [4] = "Vendredi"; 
semaine [5] = "Samedi"; 
semaine [6] = "Dimanche"; 
for (1=0; i<7; i++) { 

document . write ( semaine [ i ] + "<br />"); 
} 

//] ]> 
</script> 
</body> 
</html> 
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L'affichage des jours de la semaine est realise par une boucle for (cf ce chapitre 
avec i initialise a 0 et comme condition i inferieur a 7. 



Conditions et boucles - La boucle for) 



^\ Lorsque la longueur du tableau est inconnue, on peut utiliser la propriete length. Ainsi, I'instruction for de 
" I'exemple deviendrait : for (i=0; i<semaine . length; i++) ; 



4. Les tableaux associatifs 

Les tableaux associatifs sont des tableaux dont I'indice est une chaine de caracteres (et non plus un nombre). La 
chaine est consideree comme I'index pour I'acces aux elements du tableau. 



var moteur = new Array ( "Google" , "Yahoo ", "Voila" ) ; 
moteur [ "Google" ] = "http://www.google.fr"; 
moteur [ "Yahoo" ] ="http : / /www . yahoo . f r " ; 
moteur [ "Voila " ] ="http : / /www . voila . fr" ; 



Notez la presence des guillemets entre les crochets de rigueur pour utiliser les chaines de caracteres. 
Pour acceder aux donnees d'un tableau associatif : 

moteur [" Google " ] ou moteur[l]; 

Exemole 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

< script t ype=" text/ JavaScript "> 
//< ! [CDATA [ 

var moteur = new Array ( "Google" , "Yahoo" , "Voila" ) ; 

moteur [ "Google " ] = "http://www.google.fr"; 

moteur [ "Yahoo " ] ="http : / /www . yahoo . f r " ; 

moteur [ "Voila " ] ="http : / /www . voila . fr" ; 

document . write (moteur [ "Google " ] + "<br />"); 

document .write (moteur [2] ) ; 

//] ]> 

</script> 

</body> 

</html> 
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5. Les methodes specifiques aux tableaux 



L'objet Array o presente de nombreuses methodes. En voici quelques-unes. 



Element 


Description 


concat ( ) 


Assemble deux ou plusieurs tableaux pour n'en faire 
qu'un seul. Cette methode reclame en argument le 
tableau (ou plusieurs) qui est rajoute a la fin du 
tableau reference. 


join ( ) 


Regroupe tous les elements du tableau dans une 
seule chaine de caracteres. Les differents elements 
sont separes par un caractere separateur specifie en 
argument. Par defaut, ce separateur est une virgule. 


pop ( ) 


Supprime le dernier element du tableau et retourne sa 
valeur. 


reverse ( ) 


Inverse I'ordre des elements (mais ne les trie pas). 


shift ( ) 


Supprime le dernier element du tableau et retourne sa 
valeur. 


slice ( ) 


Cree un nouveau tableau a partir d'une partie d'un 
tableau existant. S'ecrit slice[debut,fin]. 


sort ( ) 


Trie les elements par ordre alphabetique (a condition 
qu'ils soient de meme nature). 


a. Tri alphabetique d'un tableau 

On applique la methode sort() au tableau semaine. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var semaine = new Array (); 



4 - 
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semaine[0] = "Lundi"; 
semaine[l] = "Mardi"; 
semaine[2] = "Mercredi"; 
semaine[3] = "Jeudi"; 
semaine[4] = "Vendredi"; 
semaine[5] = "Samedi"; 
semaine[6] = "Dimanche"; 
semaine . sort ( ) ; 
for (i=0; i<7; i++) { 

document . write ( semaine [ i ] + "<br />"). 

} 

//]}> 
</script> 
</body> 
</html> 



JavaScript - Windows Internet Ex... f-~ | fn] fx" 





@ C:\Documents and Se v 


s 


1*1 












JavaScript 




Dimanche 








JeucH 








LuncH 








Mardi 








Mercredi 








Samedi 








Vendredi 






V 


'J Poste de travail + x 100% ~ 



b. Assemblage de tableaux 

Soit deux tableaux : semestrei et semestre2. Ces deux tableaux sont regroupes dans un nouveau tableau annee par 
la methode concat()<$I[]>. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var semestrei = new Array (); 
semestrei [0] = "Janvier"; 
semestrei [1] = "Fevrier"; 
semestrei [2] = "Mars"; 
semestrei [3] = "Avril"; 
semestrei [4] = "Mai"; 
semestrei [5] = "Juin"; 
var semestre2 = new Array (); 
semestre2[0] = "Juillet"; 
semestre2[l] = "Aout"; 
semestre2[2] = "Septembre"; 
semestre2[3] = "Octobre"; 
semestre2[4] = "Novembre"; 
semestre2[5] = "Decembre"; 
var annee= new Array (); 
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annee = semestrel . concat (semestre2) , 
for (i = 0; i<annee . length; i++) { 
document . write ( annee [ i ] + " - ") ; 

> 

//]}> 
</script> 
</body> 
</html> 
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c. Regrouper en une chaine 



Avec la methode join(), regroupons le tableau semaine dans une chaine de caracteres. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

new Array ( ) ; 
"Lundi"; 



var semaine 

semaine [0] = 

semaine [1] = 

semaine [2] = 

semaine [3] = 

semaine [4] = 

semaine [5] = 

semaine [6] = 



"Mardi"; 
"Mercredi ' 
"Jeudi"; 
"Vendredi ' 
"Samedi"; 
"Dimanche' 1 



var join = semaine . join () ; 
document .write (join); 

//]]> 
</script> 
</body> 
</html> 



© ENI Editions - All rigths reserved 



r JavaScript - Windows Internet Explorer 



! C:\Documents and Se v 1 1 X | Livi 



& & JavaScript 



LundiAIarcU.MercTecUJeucHA ; enckedi.SamecH.Dimanche 



•J Poste de travail 



\ 100% » 



Par defaut, le separateur est une virgule. Un autre separateur peut etre specifie en argument de la methode join(). 
Soit par exemple, join("-") pour un tiret de separation. 



d. Partie d'un tableau 

Utilisation de la methode slice() pour creer un nouveau tableau comportant les mois du printemps. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www . w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<script type="text / JavaScript "> 
//<! [CDATA [ 

var annee = new Array (); 



annee 


0] = 


"Janvier" ; 


annee 


1] = 


"Fevrier " ; 


annee 


2] = 


"Mars"; 


annee 


3] = 


"Avril"; 


annee 


4] = 


"Mai"; 


annee 


5] = 


" Juin"; 


annee 


6] = 


" Juillet"; 


annee 


7] = 


"Aout"; 


annee 


8] = 


" Septembre " 


annee 


9] = 


"Octobre" ; 


annee 


10] = 


"Novembre " 


annee 


11] = 


"Decembre " 



var printemps = new Array (); 

printemps = annee . slice ( 3 , 6 ) ; 

for (i=0; i<printemps . length; i++) { 

document . write (printemps [ i ] + "<br /> "); 

} 

//]}> 
</script> 
</body> 
</html> 
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Quelques autres objets JavaScript 

Nous n'avons repris jusqu'a present que les elements essentiels du JavaScript. II existe neanmoins d'autres objets, qu'il est difficile de 
ne pas presenter mais dont I'etude est moins detaillee. 

1. L'objet Date 

L'objet Date permet de gerer les informations relatives au temps, soit la date et I'heure. 

a. new DateQ; 

L'objet Date en JavaScript presente une particularity dans la mesure ou il faut d'abord le creer, avant de pouvoir I'utiliser. 

En effet, avant de pouvoir appliquer les multiples fonctions dediees a la gestion du temps, il faut creer une instance de la date et 
I'heure de I'ordinateur de I'utilisateur . 

Cette instance est creee par new Date(). 

variable=new Date () ; 

Ainsi variable sera une chame de caracteres au format : 

Fri Feb 23 10:42:23 UTC+0100 2007 

Soit vendredi (Fri pour Friday) fevrier (Feb pour February) 23 pour le 23eme jour du mois 10:42:23 pour 10 heures 42 minutes et 
23 secondes et 2007 pour I'annee. Cette heure a ete notee a I'heure UTC (temps universel coordonne) + 1 heure. 

Commentaires : 

• la date et I'heure en JavaScript commencent au ler janvier 1970. Toute reference a une date anterieure donne un resultat 
aleatoire. 

• I'unite pour le calcul interne du temps est le millieme de seconde. 

b. Methodes 

get Year ( ) 

Retourne en principe les deux derniers chiffres de I'annee dans l'objet Date. Microsoft Internet Explorer retourne cependant les 
quatre chiffres soit ici 2007. Des problemes de compatibilite sont done possibles. 

ob jetdate=new Dated; 
annee=ob jetdate . getYear ( ) ; 
getFullYear () 

Retourne les quatre chiffres de I'annee. La compatibilite est totale. 

ob jetdate=new Dated; 
annee=ob jetdate . getFullYear { ) ; 
getMonth ( ) 

Retourne le mois sous forme d'un entier compris entre 0 et 11 (0 pour janvier, 1 pour fevrier, 2 pour mars, etc.). 

ob jetdate=new Dated; 
mois=ob jetdate . getMonth ( ) ; 
getDate ( ) ; 

Retourne le jour du mois sous forme d'un entier compris entre 1 et 31. 

ob jetdate=new Dated; 
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jour=ob jetdate . get Date ( ) ; 
getDay ( ) ; 

Retourne le jour de la semaine sous forme d'un entier compris entre 0 et 6 (0 pour dimanche, 1 pour lundi, 2 pour mardi, etc.). 

ob jetdate=new Dated; 
semaine^ ob jetdate . getDay () ; 
getHours ( ) ; 

Retourne I'heure sous forme d'un entier compris entre 0 et 23. 

ob jetdate=new Dated; 
heure=ob jetdate . getHours ( ) ; 
getMinutes ( ) ; 

Retourne les minutes sous forme d'un entier compris entre 0 et 59. 

ob jetdate=new Dated; 
minute=ob jetdate . getMinutes ( ) ; 
getSeconds ( ) ; 

Retourne les secondes sous forme d'un entier compris entre 0 et 59. 

ob jetdate=new Dated; 
seconde=ob jetdate . getSeconds () ; 

II existe de nombreuses autres methodes mais elles n'entrent pas dans le cas de cet ouvrage et de notre etude de JavaScript, 
c. Exemple 



Afficher la date et I'heure de facon usuelle en francais. 

Remplacez le numero du mois retourne avec la methode getMonth() par son nom (soit 4 par avril). 

Pour ce faire, nous allons creer un tableau indice (Array) en prenant soin de commencer a I'indice 0 pour le mois de janvier. 



var tableau_mois = 


= Array ( ) ; 


tableau_mois [ 0 ] = 


" janvier" ; 


tableau_mois [ 1 ] = 


" f evrier " ; 


tableau_mois [2] = 


"mars"; 


tableau_mois [3] = 


"avril" ; 


tableau_mois [ 4 ] = 


"mai" ; 


tableau_mois [5] = 


" juin" ; 


tableau_mois [ 6] = 


" juillet " ; 


tableau_mois [7] = 


"aout "; 


tableau_mois [ 8 ] = 


"septembre" ; 


tableau_mois [ 9] = 


"octobre"; 


tableau_mois [ 10 ] = 


= "novembre"; 


tableau_mois [ 11 ] = 


= "decembre"; 


Pour afficher le jour de la semaine en toutes lettres, nous procedons de la meme facon par un tableau. 


var tableau_jours 


= Array ( ) ; 


tableau_jours [ 0 ] = 


= "dimanche"; 


tableau_jours [ 1 ] = 


= "lundi"; 


tableau_jours [2] = 


= "mardi"; 


tableau_jours [3] = 


- "mercredi"; 


tableau_jours [ 4 ] = 


= "jeudi"; 


tableau_jours [ 5 ] = 


= "vendredi"; 


tableau_jours [ 6] = 


= "samedi"; 



On souhaite harmoniser I'affichage des heures, minutes et secondes avec deux chiffres. Ainsi au lieu d'afficher 7 h, ce sera 07 h. 

Cette manipulation peut se realiser avec un test conditionnel. Si le chiffre est inferieur a 10, on ajoutera un 0. Sinon, on garde le 
chiffre. 

Ce test peut s'ecrire : 



if (if (min<10) { 



© ENI Editions - All rigths reserved 



min= " 0 " + min ; 
} 

else { 

min= " " + min; 

} 

Ce qui peut se noter de fagon abregee (voir dans ce chapitre - Conditions et boucles - Les conditions if.. .else) : 

min = {(min<10) ? "0" : "") + min; 

Le script devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: / /www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang=" f r" lang="fr"> 

<head> 

<t it le> JavaScript < /tit le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body> 

< script type="text/ JavaScript "> 
//< ! [ CDATA [ 

var objetdate= new Dated; 
var mois=ob jetdate . getMonth ( ) ; 
var tableau_mois = Array 0; 
tableau_mois [ 0 ] = "janvier"; 
tableau_mois [ 1 ] = "fevrier"; 
tableau_mois [2] = "mars"; 
tableau_mois [3] = "avril"; 
tableau_mois [4] = "mai"; 
tableau_mois [5] = "juin"; 
tableau_mois [ 6] = "juillet"; 
tableau_mois [7] = "aout"; 
tableau_mois [ 8 ] = "septembre"; 
tableau_mois [ 9] = "octobre"; 
tableau_mois [ 10 ] = "novembre"; 
tableau_mois [ 11 ] = "decembre"; 
var nommois=tableau_mois [mois] ; 
var jour=ob jetdate . getDay 0 ; 
var tableau_jours = Array d; 
tableau_jours [ 0 ] = "dimanche"; 
tableau_jours [ 1 ] = "lundi"; 
tableau_jours [2 ] = "mardi"; 
tableau_jours [ 3 ] = "mercredi"; 
tableau_jours [ 4 ] = "jeudi"; 
tableau_jours [5] = "vendredi"; 
tableau_jours [ 6 ] = "samedi"; 
var nomjour=tableau_jours [ jour] ; 
document . write { "Nous sommes le "); 
document . write (nom jour + " "); 
document .write (ob jetdate . get Date ( ) ) ; 
document . write { " "); 
document . write (nommois ) ; 
document . write ( " "); 

document . write (ob jetdate . get Full Year ( ) ) ; 

document . write { " "); 

heure= ob jetdate . getHours {) ; 

heure = <(heure<10} ? "0" : "") + heure; 

document . write (heure + " heure "); 

min=ob jetdate . getMinutes 0 ; 

min = ( (min<10) ? "0" : "") + min; 

document . write (min + " minutes "); 

sec=ob jetdate . getSeconds 0 ; 

sec = ((sec<10) ? "0" : "") + sec; 

document . write ( sec + " secondes "); 

//] ]> 

</script> 

</body> 

</html> 
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' JavaScript - Windows Internet Ex... fL~|fp]f><] 



C^*t^^ ▼ C:\Documents and Se v *f x 



^JavaScript 



Nous sommes le vendredi 23 fevrier 200" 
1 1 heure 18 minutes 01 secondes 



j Poste de travail 



\ 100% 



2. L'objet Math 

AJAX se focalise surtout sur la manipulation des chaines de caracteres mais il n'est pas exclu qu'il faille effectuer des operations sur 
des chiffres. L'objet Math met a la disposition du programmeur JavaScript une panoplie de methodes permettant d'effectuer des 
calculs complexes. 

La syntaxe est : 

x = Mat h . met node (paramet re ) ; 

Les methodes les plus courantes de l'objet Math sont : 

abs (y) 

La methode abs(y) renvoie la valeur absolue (valeur positive) de y. El le supprime, en quelque sorte, le signe negatif d'un nombre. 

Y = -4; 

x = math.abs(y); a comme resultat 4. 
ceil (y ) 

La methode ceil(y) renvoie rentier superieur ou egal a y. 

Attention ! Cette fonction n'arrondit pas le nombre. Comme I'illustre I'exemple suivant, si y = 1.01, la valeur de x vaut 2. 

y=1.01; 

x=Math.ceil(y); a comme resultat 2. 
floor (y) 

La methode floor(y) renvoie rentier inferieur ou egal a y. 

Attention ! Cette fonction n'arrondit pas le nombre. Si y = 1.99, la valeur de x vaut 1. 

y=l . 9 9; 

x=Math. floor (y) ; a comme resultat 1. 
round (y ) 

La methode round(y) arrondit le nombre a rentier le plus proche. 

y=2 0 .355; 

x=Math . round (y) ; a comme resultat 20. 

Attention ! Certains calculs reclament une plus grande precision. Ainsi, pour avoir deux decimales apres la virgule, la formule suivante 
est utilisee : 

x=Math.round(y*ioo) ) /loo,- et dans ce cas, x vaut 20.36. 

max (y , z ) 

La methode max(y,z) renvoie le plus grand des deux nombres y et z. 
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y=20; z=10; 

x=Math.max(y,z); a comme resultat 2 0. 
min (y , z ) 

La methode min(y,z) renvoie le plus petit des 2 nombres y et z. 

y=20; z=10; 

x^Math.min (y, z) ; a comme resultat x = 1 0 . 
pow (y , z ) 

La methode pow() calcule la valeur d'un nombre y a la puissance z. 

y=2; z=8 

x^Math.pow (y, z) ; a comme resultat 2 s soit 256. 
random ( ) 

La methode random() renvoie la valeur d'un nombre aleatoire choisi entre 0 et 1. 
Ce nombre aleatoire pourrait etre 0.042105102268759464. 

sqrt (y) 

La methode sqrt(y) renvoie la racine carree de y. 

y = 2 5; 

x=Math.sqrt(y); a comme resultat 5. 
parseFloat (var) 

Cette fonction convertit une chame en un nombre a virgule flottante. Particulierement utile pour transformer le contenu d'une zone de 
texte (qui est considere comme une chaine de caracteres) en un nombre en vue d'un traitement de calcul. 

str=' - . 12345' ; 

x^parseFloat (str) ; aura comme resultat le nombre -.12345. 

Attention ! Le resultat risque d'etre surprenant si JavaScript rencontre autre chose dans la chaine que des chiffres, les signes + et -, 
le point decimal ou un exposant. S'il trouve un caractere "etranger", la fonction ne prend en compte que les caracteres avant le 
caractere "etranger". 

Si le premier caractere n'est pas un caractere admis, x est egal a 0 ou a NaN (A/or a Number). 

str=' € 5.50'; 

x^parseFloat (str) ; a comme resultat NaN. 
parselnt (var) 

Retourne la partie entiere d'un nombre avec une virgule. 

str=' 1.2345'; 

x=parselnt (str) ; a comme resultat 1 . 
eval (var) 

Cette fonction evalue une chaine de caracteres sous forme de valeur numerique. Dans la chaine peuvent etre stockees des 
operations numeriques, des operations de comparaison, des instructions et meme des fonctions. 

Str=' 5 + 10' ; 

x=eval(str) ; a comme resultat 15. 

Exemole 

Elaborons un convertisseur FF vers I'euro. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www.w3 . org/TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>JavaScript</title> 

<meta http-equiv="Content-Type" content="text/html" /> 
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<meta http-equiv=" Content -Script -Type" content="text / javascript " /> 

< script type="text / JavaScript "> 

//< ! [ CDATA [ 

var montant_f rancs; 

var mont ant_euro; 

function convertir () { 

mont ant_f rancs = document .form. entree . value; 
montant_f rancs =mont ant_f rancs . replace (/,/,"."); 
montant=parseFloat (montant_f rancs ) ; 
mont ant_euro=mont ant / 6 .55 957; 

montant_euro= (Math . round (montant_euro*10G ) ) /100; 
document . form. sort ie . value=montant_euro; 
if (isNaN (montant_f rancs) ) 

{ 

alert { "Entrez un nombre"); 
document .form. entree . value = " " ; 
document . form. sort ie . value = " " ; 
} 
} 

//]]> 
</script> 
</head> 
<body> 

<f orm name=" form" act ion= " " > 

<input type="text" size="10" name="entree" /> FF 

<input type="button" value="Convertir" onclick="convertir { ) " /> 

<input type="text" size="10" name="sortie" /> _ 

</f orm> 

</body> 

</html> 



Pour commencer, les variables montant_f rancs et montant_euro sont definies. 

Dans montant_f rancs, la valeur de la zone de texte d'entree est recuperee soit la valeur de document. form. entree. value. 

Le visiteur risque d'encoder Ie montant avec une virgule. La fonction replace() est utilisee pour convertir I'eventuelle virgule en point 
(voir ce chapitre Manipulation des chaines des caracteres - replace()). 

Pour transformer en nombre la chaine de caracteres contenue dans la variable formuie, la methode parseFloatQ presentee ci-avant 
est utilisee. 

Ce nombre est divise par 6.55957, puis est arrondit (Math, round o ). 

Enfin si I'utilisateur n'a pas encode un nombre (NaN), une boite d'alerte apparait et les zones de texte sont reinitialisees. 



f- JavaScript - Windows Internet Explorer _ | □ |[ X 



, - , ^) " ^ C:\Documents and 5e v *t X 
ii I ^JavaScript 




j Poste de travail 
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3. L'objet navigator 

L'objet navigator est particulierement utile pour adapter les modalites d'execution des scripts lors des divergences d'implementation 
de certaines instructions JavaScript selon les navigateurs ou selon les versions d'un meme navigateur. 

a. Proprietes 



L'objet navigator de JavaScript fournit un ensemble d'informations sur I'environnement de travail du visiteur et tout particulierement 
sur le navigateur qu'il utilise. 

Passons en revue quelques-unes de ses proprietes et methodes. 



Propriete 


Description 




Retourne le "surnom" (CodeName) du navigateur. 
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appCodeName 


Historiquement, cette propriete a ete inventee par 
Netscape : en effet le navigateur Netscape portait (deja) le 
surnom de "Mozilla". 


appName 


Retourne le nom du navigateur. 


appVersion 


Retourne la version du navigateur. 


language 


Specifie la langue utilisee par le navigateur. Cette propriete 
n'existe pas sous Internet Explorer. 


userLanguage 


Specifie la langue utilisee par le navigateur. Cette propriete 
n'est valable que sous Internet Explorer. 


platform 


Retourne le systeme d'exploitation du navigateur de 
I'internaute. 


userAgent 


Specifie des informations relatives au navigateur (user sgent 
signifie navigateur). 



Appliquees a la machine de I'auteur, ces proprietes fournissent les informations suivantes : 
navigator.appCodeName 



Internet Explorer 6 et 7 


Mozilla (etonnant non ?) 


Firefox 


Mozilla 



Comme Internet Explorer, Netscape, Mozilla, Opera ou Firefox renvoient la meme valeur, cette propriete n'est pas tres utile dans la 
pratique. 



navigator.appName 



Internet Explorer 6 et 7 


Microsoft Internet Explorer 


Firefox 


Netscape 


navigator.appVersion 


Internet Explorer 7 


4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET 
CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 
3.0.04506.30) 


Internet Explorer 6 


4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET 
CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 
3.0.04506.30) 


Firefox 


5.0 (Windows; fr-FR) 


Les informations, autant pour Internet Explorer que pour Firefox sont assez neutres. Seul la mention MSIE (Microsoft Internet 
Explorer) permet vraiment d'identifier Internet Explorer. 


navigator.language 




Internet Explorer 6 et 7 


undefined 


Firefox 


fr-FR 


navigator. userLanguage 


Internet Explorer 6 et 7 


fr 


Firefox 


undefined 


navigator.platform 


Internet Explorer 6 et 7 


Win32 


Firefox 


Win32 


navigator. userAgent 


Internet Explorer 7 


Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 
5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; 
.NET CLR 3.0.04506.30) 


Internet Explorer 6 


Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 
5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; 
.NET CLR 3.0.04506.30) 
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Firefox 2 



Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; 
rv: 1.8.1.1) Gecko/20061204 Firef ox/2.0.0.1 



b. Distinguer Internet Explorer de Firefox 

La propriete userAgent permet d'identifier le nom du navigateur. Grace a la methode indexOf (ce chapitre Manipulation des chatnes 
de caracteres - indexOfQ), la presence de la chaine partielle "MSIE" ou "Firefox" va etre verifiee. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1999/xhtml " xml : lang="fr" lang="fr"> 

<head> 

<t it le> JavaScript < /tit le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body> 

< script type="text/ JavaScript "> 
//< ! [CDATA [ 

if (navigator . userAgent . indexOf ( "MSIE" ) != -1) { 
navigateur = "Internet Explorer"; 

} 

else { 

if (navigator . userAgent . indexOf ( "Firef ox" ) != -1) { 
navigateur = "Firefox"; 

} 

else { 

navigateur -"Autre"; 

} 

} 

document . write { "Votre navigateur est " + navigateur); 

//] ]> 
</script> 
</body> 
</html> 



Voici le resultat sous Firefox : 



r ^— ^— —————— — — ^— 

' 3 JavaScript - Mozilla Firefox 






Fichier Edition Affichage Historique Marque-pages 


Outils 


ffllQfto:/// 


▼ 


► 




El- 
















Votre navigateur est Firefox 


V 


Termine 









c. Identifier les versions d'Internet Explorer 

Nous utilisons les informations transmises par navigator. userAgent. 



Internet Explorer 7 


Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 
5.1; .NET) 


Internet Explorer 6 


Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 
5.1; SV1) 


Internet Explorer 5.5 


Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 
5.1; SV1) 


Internet Explorer 5 


Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 
5.0; SV1) 



II est evident que nous devons rechercher la presence des chalnes partielles MSIE 7, MSIE 6, MSIE 5.5 et MSIE 5.0 afin d'identifier 
les versions d'Internet Explorer. 



Le script devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
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"http: //www. w3 . org/TR/xhtmll /DTD/ xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<t it le> JavaScript </t it le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body> 

< script type="text/ JavaScript "> 
//< ! [CDATA [ 

if (navigator . userAgent . indexOf { "MSIE 7") != -1) { 
document . write { "<h2> Internet Explorer 7</h2>"); 
} 

if (navigator . userAgent . indexOf ( "MSIE 6") != -1) { 
document . write ( "<h2> Internet Explorer 6</h2>"); 
} 

if (navigator . userAgent . indexOf ( "MSIE 5.5") != -1) { 
document . write ( "<h2> Internet Explorer 5.5</h2>"); 

} 

if (navigator .userAgent . indexOf ( "MSIE 5.0") != -1) { 
document . write ( "<h2> Internet Explorer 5</h2>"); 
} 

//] ]> 
</script> 
</body> 
</html> 



Et le resultat sous Internet Explorer 6 : 



"1 JavaScript - Microsoft Internet Expl... Q (□][><] 



Fichier Edition Affichage Favoris Outils ? !f 


I Qprfcedente - [*\ [£\ ', 


» 


* 


Internet Explorer 6 








^} Terrnine ^ My Computer 



4. L'objet window 

Certaines methodes de l'objet window ne vous sont pas inconnues. Ainsi les methodes alertQ, confirm(), prompt() et setTimeout ont 
deja ete abordees dans ce chapitre - Fonctions et methodes. 



a. La fenetre popup 

Les methodes open() et close() de l'objet window permettent d'ouvrir (open) ou de fermer (close) une nouvelle fenetre du 
navigateur. II sera en outre possible de definir de nombreuses caracteristiques de cette nouvelle fenetre. 

L'usage des nouvelles fenetres, appelees aussi fenetres pop-up, est souvent utile pour afficher des informations complementaires 
sans surcharger la page (ou la fenetre) de depart. Elles comportent cependant deux desagrements notoires. En effet, si le 
concepteur n'a pas prevu un moyen de fermer celles-ci, un nombre important de fenetres pop-up peut apparaitre. En outre, il faut 
admettre que la toile est "polluee" par ces fenetres pop-up, le plus souvent utilisees a des fins publicitaires. Nous vous conseillons 
de bien fermer les fenetres pop-up et a les utiliser avec moderation ou discernement. 

La syntaxe de open() est : 

window. open ("URL", " nom_f enet re ", "caracteristiques_fenetre") ; 

Commentaires : 

• la mention de window est facultative car window etant l'objet avec la plus haute priorite, celui-ci est repris par defaut par le 
JavaScript. 

• url est I'adresse de la page que Ton desire afficher dans la nouvelle fenetre. Si on ne desire pas afficher un fichier htm 
existant, on indiquera simplement " ". 
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• nom_fenetre designe le nom de la nouvelle fenetre : cette variable peut etre reprise en reference dans le code JavaScript. 

• caracterstiques_fenetre est une liste (voir ci-apres) de certaines ou de toutes les caracteristiques de la fenetre. Celles-ci 
se notent a la suite I'une de I'autre, separees par des virgules, sans retour a la ligne. Ces caracteristiques doivent etre 
imperativement ecrites sur une seule et meme ligne. 

Q Pour le moteur JavaScript, les caracteristiques de la fenetre doivent etre imperativement ecrites sur une seule et meme ligne. 
Ces caracteristiques sont : 

width=x 

Largeur de la nouvelle fenetre en pixels. 

height=x 

Hauteur de la nouvelle fenetre en pixels. La valeur minimale est de 100 pixels. 



C Fenetre Popup - Windo... Q 



toolbar=yes ou no 



Affichage de la barre d'outils. La valeur par defaut est yes 



location=yes ou no 

Affichage de la barre d'adresse. 



Fenetre Popup - Windo... L- 



£ Fenetre Popup Windo... £j |X_| 



" |g] aboutiblank 



directories=yes ou no 

Affichage des boutons d'acces rapide (barre de liens). Pas d'affichage sous IE 7. 
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'3 Fenetre pop-up Micro... (»J {xj 



status=yes ou no 

Affichage de la barre d'etat. 



0 Fenetre Popup Windo... Q |Xj 



Internet \ 100% - 

menubar=yes ou no 

Affichage de la barre de menus. 



Fenetre Popup - Windo... Q [xj 



Fichier Edition Affichage Favoris C 



scrollbars=yes ou no 

Affichage des barres de defilement. 



(C Fenetre Popup - Windo... Q fx] 



V 

resizable=yes ou no 

Redimensionnement de la fenetre. 

f ullscreen=yes ou no 

Affichage de la nouvelle fenetre en plein ecran. Internet Explorer uniquement. 

top=x 

Position en pixels par rapport au bord superieur de I'ecran. 

left=x 

Position en pixels par rapport au bord gauche de I'ecran. 
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La notation 1 ou 0 a la place de yes ou no est egalement possible. 
La syntaxe de close() est la suivante : 

window, close ( "nom_de_la_f enetre" ) OU window est facultatif. 

Dans la pratique, pour eviter toute confusion possible, le raccourci self est utilise pour indiquer la fenetre en cours. 



window. self. close () ; 

La methode close() entre dans le cadre du concept de securite de JavaScript. Cela signifie qu'une fenetre, a partir du moment ou 
elle possede un historique (parce que I'utilisateur a deja appele plusieurs pages), ne se laisse plus fermer sans demande de 
confirmation de la part du navigateur. II n'est pas possible d'empecher cette demande. 



Microsoft Internet Explorer 



La page Web en cours tente de fermer la fenetre. 
Voulez-vous fermer cette fenetre ? 



Oui 



Non 



Exemole 1 

Plutot que de charger un fichier htm, il est possible d'ecrire en JavaScript dans la nouvelle fenetre. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD/ xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<t it le> JavaScript </t it le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type="text/ JavaScript "> 

//< ! [CDATA [ 

function popup ( ) { 

nouvelle = open('', , 'width=200, height=100, toolbar=no, location=no, 
directories=no, status=no, menubar=no, scrollbars=no, resizable=no' ) ; 
nouvelle . document .write (' <htmlxheadxtitle>Popup l</titlex/head> 
<body bgcolor=\"#99ccf f \"><h2> JavaScript</h2x/bodyx/html>' ) ; 
} 

//] ]> 
</script> 
</head> 
<body> 

<form action^" "> 

<input type ^"button" value="Ouvrir la fenetre" onclick="popup { ) " /> 

</f orm> 

</body> 

</html> 



Pour rappel, les caracteristiques de la nouvelle fenetre et le code de I'instruction write doivent etre imperativement ecrits sur une 
seule et meme ligne dans le code. 



r 

0 JavaScript - Windows Internet Ex... Q[6]fx] 




kl*^^ ▼ C:\Documents and Se v \*f\ 


X Live 




"U JavaScript 


\ a- 




At 

Ouvrir la fenetre 




Popup 1 


Windows Int... \T\ f X | 


JavaScript 


j Poste de travail 





Exemple 2 

Fermer une nouvelle fenetre avec un bouton. 
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La methode close() requiert le nom de la fenetre comme argument. Pour eviter toute confusion possible, on utilise self pour indiquer 
la fenetre en cours. 

Voici le fichier qui lance la fenetre popup : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/ 1 999 /xhtml " xml : lang="fr" lang="fr"> 

<head> 

<t it le> JavaScript </t it le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

< script type="text / JavaScript "> 

//< ! [CDATA [ 

function popup { ) { 

open ('popup.htm' ,' nouvelle' , 'width=200, height=100, toolbar=no, locati 
on=no, directories=no, status=no, menubar=no, scrollbars=no, resizable^ 
no' ) ; 

} 

//] ]> 
</script> 
</head> 
<body> 

<form action^" "> 

<input type ^"button" value="Ouvrir la fenetre" onclick="popup { ) " /> 

</f orm> 

</body> 

</html> 



Pour rappel, les caracteristiques de la nouvelle fenetre doivent etre imperativement ecrites sur une seule et meme ligne dans le 
code. 

Le fichier popup.htm de la nouvelle fenetre : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Popup</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body style="text-align : center; "> 
Nouvelle fenetre 
<form action^" "> 

<input type="button" value= "Fermer" onclick^" self . close () " /> 

</f orm> 

</body> 

</html> 
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Nouvelle fenetre 



Fermer 



b. La zone utile du navigateur 



La zone disponible pour la page dans la fenetre du navigateur peut etre determinee par les proprietes innerWidth et innerHeight 
de I'objet window pour Firefox et autres navigateurs de la famille Mozilla. 
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innerHeight 

Hauteur utile de la fenetre (hors cadre et barre de defilement). En pixels. 

innerWidth 

Largeur utile de la fenetre (hors cadre et barre de defilement). En pixels. 

Internet Explorer ne reconnait pas ces proprietes mais ces dimensions sont disponibles par les proprietes body.clientHeight et 
body.clientWidth de I'objet document. 

Voici un script compatible pour les deux versions du navigateur : 

<html> 
<head> 

<t it le> JavaScript </t it le> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body> 

<script type="text/ JavaScript "> 
//< ! [CDATA [ 
var largeur; 
var hauteur; 

if (window . innerWidth) { 
largeur = window . innerWidth; 
} 

else { 

largeur = document . body . clientWidth; 
} 

if (window . innerHeight ) { 
hauteur = window . innerHeight ; 
} 

else { 

hauteur = document . body . clientHeight; 

} 

document . write { "La largeur disponible est de " + largeur +" 
pixels . <br />") ; 

document . write ( "La hauteur disponible est de " + hauteur +" pixels."); 

//] ]> 
</script> 
</body> 
</html> 



Commentaires 

• Apres avoir defini les variables largeur et hauteur, si la propriete window. innerWidth est reconnue dans ce cas nous avons 
a faire a Firefox. Ceci est une autre facon de tester le navigateur de I'utilisateur. Plutot que de passer par les informations 
de I'objet navigator vues au point Quelques autres objets JavaScript - L'objet Navigator de ce chapitre, on teste simplement 
si I'objet ou la propriete existe pour gagner des lignes de code.lmb o, 

• Pour etre tout a fait complet, on signale dans les sites specialises dans la compatibilite des navigateurs (par exemple, 
www.quirksmode.org), que dans le cas d'un fichier Html ou Xhtml avec une declaration de DTD, il est necessaire, dans le cas 

d'Internet Explorer, de passer par : document. documentElement .clientWidth et 

document . documentEiement . clientHeight .Ceci illustre bien que dans certaines situations, JavaScript peut se reveler 
hautement incompatible. 

Capture d'ecran pour Firefox : 



r i .i ■ 

*c) JavaScript - MozHIa Firefox 


( 


3@® 


Fichier Edition Affichage Historique Marque-pages Outils 




□ File:/// 


▼ 








La largeur disponible est de 349 pixels. 
La hauteur disponible est de 122 pixels. 
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Termine 
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Capture d'ecran pour Internet Explorer : 
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Le XML 



Dans le terme AJAX, le X signifie XML (Asynchronous JavaScript and XML). Ainsi, il convient d'introduire ou de rappeler 
quelques elements de ce langage. 

Le XML est un metalangage, soit un langage pour ecrire d'autres langages. 

Meme s'il n'y a que peu de chances que vous conceviez un jour votre propre langage, le XML est une veritable revolution 
dans le panorama de la publication sur le Web. II apparait aujourd'hui comme incontournable car il est deja a la base de 
toute une serie de nouveaux langages qui sont, ou qui seront, utilises dans la conception des pages Web. Ces 
nouveaux langages generes a partir du XML en reprennent I'esprit, les regies et la syntaxe que vous decouvrirez ci- 
apres. 

Au tout debut de I'informatique et de I'lnternet, existait deja le SGML (Standard Generalized Markup Language), un langage 
normalise pour la conception de langages de balises. Cette norme internationale (IS08879) a comme objectif de decrire 
la structure et le contenu de differents types de documents electroniques. Le SGML a la particularity d'etre tres concis 
mais aussi tres abstrait. En consequence, il n'est que tres difficilement abordable par les non-inities. Les langages qui en 
decoulent sont pourtant assez nombreux et vous ne pouvez pas ignorer un de ses fils qui est un langage de balises 
utilise pour la publication sur le Web : le HTML (HyperText Markup Language). 

Le Html ayant mal vieilli au fil des versions, le W3C Consortium, qui regit les regies de la publication sur le Web, a decide 
de repartir d'une feuille blanche en revenant en quelques sortes aux sources. D'ou le XML (extensible Markup Language) 
qui presente de fortes similitudes avec le SGML dont il est issu. Ainsi, le XML peut etre considere comme un SGML 
simplifie ou un SGML qui serait plus abordable. 

Le XML (extensible Markup Language) est done un langage de balises comme le Html mais il est extensible ou autrement 
dit, evolutif. En XML, les balises ne sont pas predefinies. C'est a vous de definir vos propres balises. 

Si les navigateurs affichent sans probleme les balises predefinies du Html comme <hi>, <br> ou autres <tabie>, que 
doivent-ils faire avec vos balises du style <membre> ou <nouveau> ? Le XML a comme vocation de decrire de I'information 
et non pas de I'afficher. Ainsi le XML pourtant cree en 1999, est reste durant quelques annees un concept plutot 
theorique faute de navigateurs capable d'afficher ce format. Avec le developpement de nouvelles techniques comme le 
XSL (Extended Stylesheet Language ou langage de feuilles de style extensible), il est devenu maintenant possible de 
percevoir concretement les enormes potentialites de ce nouveau langage. 



C\ En conclusion, si le Html a ete congu pour afficher de I'information, le XML a ete cree pour structurer de 
^ I'information. A lui seul, il n'est cense rien faire d'autre ! 



Voici un premier exemple de XML. 

<?xml version=" 1 . 0 " ?> 
<demoxml> 

<me s s age > Vo i c i du XML< /mes sage> 
< / demoxml > 

Ce qui affiche dans le navigateur Internet Explorer donne le resultat suivant. 
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<?xml version="1.0" ?> 
- <demoxml> 

<message>Voici du 
XML</message> 

</demoxml> 





^ Poste de travail % 100% ~ 



II n'y a pas de quoi se rejouir sur le plan esthetique... Mais le XML n'est finalement que de I'information structuree, 
encodee entre des balises. II faudra d'autres elements comme une declaration de feuilles de style CSS ou un fichier XSL, 
pour que le navigateur puisse "comprendre" vos balises et afficher ce fichier sous une forme plus conviviale. 

Si le Html a regne en maltre sur le Web durant la derniere decennie du 20eme siecle (1990 a 2000), le XML est sans 
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aucun doute possible, le standard omnipresent pour tout ce qui concerne la structuration et I'echange de donnees 
durant les premieres decennies du 21eme siecle. 
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Le XML, le Html et le Xhtml 



Lorsque les techniques de publication sur le Web sont abordees, une comparaison entre le Html, le Xhtml et le XML 
s'impose. Au contraire de ce qui a deja ete ecrit par ailleurs, le XML n'est pas le successeur du Html. Le XML, le Xhtml et le 
Html sont des langages distincts ! 



1. Une seule similitude : le SGML 

Le seul point commun entre le Html et le XML est qu'ils sont issus tous deux de la meme "mere" soit le SGML 
{Standardized Generalised Markup Language) qui est le langage de reference en milieu professionnel pour tout ce qui 
concerne la gestion electronique des documents. lis sont done, tous deux, des langages de balises (voir le Markup 
Language). lis ont egalement des caracteristiques communes heritees du SGML qui consistent a transporter sur le Web 
des donnees en mode texte (plain text), compatibles avec n'importe quelle plate-forme logicielle. 



2. Les differences entre le Html et le XML 

Le Html et le XML different sur de tres nombreux points dont certains ont trait a I'essence meme du langage. 

• Le XML decrit, structure, echange des donnees tandis que le Html a pour vocation d'afficher des donnees. 

• Le XML est un generateur de langages (metalangage). Le Html est un langage normalise de publication sur le 
Web. 

• Le XML est extensible. II permet de creer ses propres balises en fonction des donnees traitees. En Html, les 
balises sont predefinies et elles sont done figees. 

• Le XML est un langage strict dont I'ecriture doit etre rigoureuse. La syntaxe du Html est devenue tres (trop ?) 
permissive a cause des navigateurs recents. 



3. Le Xhtml 

Le Xhtml est presente comme le successeur du Html. Mais il est surtout un des "enfants" engendres par le XML. Pour 
contourner le probleme des derives du Html au fil des differentes versions, le W3C a congu le Xhtml comme etant une 
reformulation du Html 4.0 selon la syntaxe et les regies du XML. 



SGML - Standard Generalized Markup Language 










HTML 


XML 












> 




XHTML XSL MathML 



Le Xhtml a ainsi, entre autres choses, herite de la structure rigoureuse du XML et de sa rigueur d'ecriture. 
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La syntaxe du XML 



Le XML impose des regies de syntaxe tres strictes et tres specifiques par rapport au Html. On retrouvera ces memes 
regies de syntaxe dans tous les langages derives du XML, dont le Xhtml. 

Passons ces regies en revue : 

• Le XML est un langage de balises. Mais au contraire du Html ou les balises sont definies, vous devez ou pouvez 
inventer vos propres balises. Rappelez-vous, le XML est extensible. II faut done definir soi-meme le nom des 
balises utilisees. 

II y a quelques regies pour la composition des noms (mais elles ne derouteront pas les habitues du JavaScript) : 

• Les noms peuvent contenir des lettres, des chiffres ou d'autres caracteres. 

• Les noms ne peuvent debuter par un nombre ou un signe de ponctuation. 

• Les noms ne peuvent commencer par les lettres xml (ou XML ou Xml...). 

• Les noms ne peuvent contenir des espaces. 

• La longueur des noms est libre mais on conseille de rester raisonnable. 

• On evitera certains signes qui pourraient preter a confusion comme le tiret, le point virgule, le point, la virgule, le 
signe plus grand que (>) et le signe plus petit que (<). 

• Les balises sont sensibles aux majuscules et minuscules (case sensitive). Ainsi, la balise <Message> est 
differente de la balise <message>. La balise d'ouverture et la balise de fermeture doivent done etre identiques. 
Ainsi par exemple <Message> ... </message> est incorrect et <message> ... </message> est correct. 

• Un consensus se degage pour n'ecrire les balises qu'en minuscules, limitant ainsi les erreurs possibles. 

• Toute balise ouverte doit etre, imperativement, fermee. 

• Les mauvaises pratiques du Html avec lesquelles on pouvait dans certains cas omettre la balise de fin comme 
pour le paragraphe <p> ou I'element de liste <ii> sont revolues. 

Ainsi en Html, ce qui suit est affiche correctement : 

<p> 
<ul> 

<li>Point 1 
<li>Point 2 

Le XML est beaucoup plus strict. On devrait avoir : 

<p> 
<ul> 

<li>Point K/li> 
<li>Point 2</li> 
</ul> 

<P> 

Les eventuelles balises uniques, appelees aussi balises vides, comme <br>, <meta> ou <img> en Html, doivent 
egalement comporter un signe de fermeture soit balise/. Ainsi une balise <meta/> serait correcte en XML. 

• Les balises doivent etre correctement imbriquees. Le XML attachant beaucoup d'importance a la structure des 
donnees, des balises mal imbriquees sont des fautes graves de sens. 

Ainsi I'ecriture suivante est incorrecte car les balises ne sont pas bien imbriquees : 
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<parent><enf ant >Marine< /parent ></ enfant > 

L'ecriture correcte avec une bonne imbrication des elements est : <parent><enfant>Marine</enfant></parent> 

• Tout document XML doit comporter une racine. 

En fait, la premiere paire de balises d'un document XML sera consideree comme la balise de racine (root). 
Par exemple : 

<racine> 

. . . suite du document XML . . . 
</ racine> 

En comparaison avec le Html ou le Xhtml, I'element racine est <htmi> . . . </htmi>. 

Tous les autres elements sont imbriques entre ces balises de racine. 

Par exemple : 

<racine> 

<parents> 

<enfants> 

<pet i t s_e n f an t s > . . . < /pet it s_enf ant s > 

</enfants> 

</parents> 

</ racine> 

• Les valeurs des attributs doivent toujours etre mises entre des guillemets. Le XML peut (comme le Html) avoir 
des attributs comportant des valeurs. En XML, les valeurs des attributs doivent obligatoirement etre reprises 
entre des guillemets, a I'inverse du Html ou leur presence ou leur absence n'a plus beaucoup d'importance pour 
les navigateurs. 

Ainsi, l'ecriture suivante est incorrecte car il manque les guillemets. 

<enf ant date_anniversaire=07 1185> 
La bonne ecriture est : 

<enf ant date_anniversaire=" 071185 "> 

• Le XML est un langage strict. Votre document doit imperativement respecter la syntaxe du XML. On dit alors que 
le document est bien forme (Well-formed). Seuls les documents "bien formes" sont affiches correctement. A la 
moindre erreur de syntaxe, le document n'est pas affiche ! 

Voici ce qui est affiche dans Internet Explorer et Firefox lorsque le document est incorrect. 
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La page XML ne peut pas etre affichee 

Impossible d'afficher I'entree XML en utilisant ia feuille de style XSL. 
Corrigez I'erreur, puis cliquez sur le bouton Actualiser ou reessayez 
ulterieurement. 



La balise de fin enfants ne correspond pas a la balise de 
debut enfant. Erreur de traitement de la ressource 
file:///C:/Doc... 

</enfar.ts> 
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Erreur d'analyse XML : balise ne corresp 
Emplacement : file:///C:/Documents%20ar 
Numero de ligne 5. Colonne 3 : 



</enfants> 

. _ A 



Termine 



Les navigateurs sont aussi un outil de debogage rudimentaire du code XML. 
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Un premier document XML 



Voici un premier document XML qui sera etoffe en cours de chapitre. 

<?xml version="l . 0" encoding=" I SO-8 85 9-1 5 " ?> 

La declaration <?xmi version="i . 0"?> indique au navigateur que ce qui suit est un document XML selon sa version 1.0. 
Vous remarquerez que cette balise ne comporte pas de signe de fermeture car cette balise n'est pas encore du XML. 

Le jeu de caracteres a utiliser est generalement notifie a I'intention de I'interpreteur XML (Parser). Le jeu de caracteres 
ISO-8859-15 a, pour nous francophones, I'avantage d'accepter la plupart des lettres avec des accents et le signe euro. 
De fagon native, le XML est congu par le jeu de caracteres UTF-8. 

<racine> 

L 'element racine indispensable au XML. Vous pouvez utiliser, a votre convenance, n'importe quel nom pour cette balise 
de racine. 



. . . suite du document XML . . . 

Votre document XML proprement dit, qui respecte bien entendu scrupuleusement la syntaxe du XML (bien forme). 

</racine> 

Le document XML se termine obligatoirement par la fermeture de la balise de racine. 
Exemple 

Voici un petit fichier XML. 

<?xml version=" 1 . 0 " encoding=" ISO-8859-15 "?> 

< f ami 1 1 e > 

<enfants> 

<fils>Loic</fils> 

<fille>Marine</fille> 

</ enfants> 

</f amille> 

On le reproduit dans le programme Bloc-notes (Notepad) pour les utilisateurs de Windows. 



C Sans titre - Bloc-notes 
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<?xml versi on="l. 0" encodi ng="ISO-8859-15 ' 

<f ami 1 1 e> 

<enf ants> 

<fi 1 s>l_oi c</f i ls> 

<f i 1 1 e>Mari ne</f i "N e> 

</enf ants> 

</f ami 1 1 e> 



?> I 



Et on I'enregistre en Type : Tous les fichiers sous un nom avec une extension .xml. 



Nom du fichiet : 
Type: 
Codage : 



Enregistter 



Tous les fichiers 



Fichiers texte (".txtl 



Tous les fichiers 



Annuler 



Resultat dans Microsoft Internet Explorer 7 
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<?xml version="1.0" encoding="ISO-8859- 15" ?> 
- <famille> 
- <enfants> 

<fils>Loic</fils> 
<fille>Marine</fille> 
</enfants> 
</famille> 



j Poste de travail 



100% 



Vous remarquerez qu'il y a un petit signe moins affiche devant des balises englobantes. II suffit de cliquer sur le signe 
pour masquer celles-ci, et bien entendu, de cliquer sur le signe plus pour les faire reapparaitre. 
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<?xm! version="1.0" encoding="ISO- 
- <famille> 
+ <enfants> 
</famille> 


8859-15" ?> 
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Resultat sous Firefox 



* ) Mozilla Firefox 
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Ce fichier XML ne semble pas avoir d'information de style lui 
etant associe. L'arbre du document est montre ci-dessous. 



- <famille> 
- <enfants> 

<fils>Loic</fils> 
<fiIle>Marine</fille> 
</enfants> 
</famille> 



Termine 
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Firefox fait remarquer qu'il n'y a aucune information de style associee au fichier XML afin de I'afficher valablement. Ainsi 
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seule la structure du document (appelee aussi I'arbre) peut etre affichee. 
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Le DOCTYPE 



Le DOCTYPE ou DTD (Document Type Definition) est I'ensemble des regies et des proprieties que doit suivre le document 
XML produit. Ces regies definissent generalement le nom et le contenu de chaque balise ainsi que le contexte dans 
lequel elles doivent exister. Cette formalisation des elements est particulierement utile lorsqu'on utilise de fagon 
recurrente des balises dans un document XML ou que plusieurs personnes sont appelees a travailler sur le meme 
document XML. 

Les DTD sont ecrites selon les prescriptions du SGML. 

L'etude detaillee des DTDs depasse de loin le cadre de cet ouvrage mais un apergu est cependant utile, surtout pour 
comprendre le fonctionnement des langages derives du XML (comme le Xhtml) qui ne manquent pas d'utiliser ces fameux 
DTDs. 

Dans certains cas, plusieurs concepteurs peuvent se mettre d'accord pour utiliser un DTD commun pour echanger leurs 
donnees. C'est le cas du Xhtml, ou le DOCTYPE est signale dans I'en-tete du document (strict, transitional ou frameset). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
" http : / /www . w3.org/TR/ xhtml 1 /DTD/ xhtml 1- st rict.dtd"> 

Cependant, dans la plupart des applications XML, le concepteur doit ecrire sa propre definition de document. 



1. DTD interne 

On peut inclure le DOCTYPE au code du fichier XML. On parlera alors d'un DTD interne. 
Un DTD interne suit la syntaxe suivante : 

<!DOCTYPE element-racine [ 
declaration des composants 

] > 

Du point de vue des DTDs, tous les documents XML sont elabores avec les composants suivants : 

• les elements ou plus communement les balises. Exemple : la balise <body> en Xhtml. 

• les attributs qui viennent completer les balises. Les attributs sont toujours inclus dans la balise ouvrante. 
Exemple : I'attribut border de la balise <tabie> en Xhtml. 

• Les PCDATA (parsed character data), chaines de caracteres qui seront affichees par I'interpreteur XML (Parser). 
Exemple : le contenu de la balise <p>chapitre 1 : Le Xhtml</p> en Xhtml. 

• Les CDATA (character data), chaines de caracteres qui ne sont pas prises en compte et qui ne sont done pas 
affichees par le navigateur XML. 

Exemple, du code JavaScript dans un document Xhtml. 

• Les entites, sorte de raccourci qui permet de declarer plusieurs parametres utilisables en appelant simplement 
I'entite plus loin dans le document. 

Detaillons ci-apres quelques regies pour definir ces differents composants. 



a. La declaration d'un element 

Un element se declare dans la DTD selon la syntaxe suivante : 

< ! ELEMENT nom_de_l' element mot-cle> 
ou 

< ! ELEMENT nom_de_l' element (contenu) > 

Exemple 
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< ! element hi> pour la balise <hi> en Xhtml. 

b. Les elements vides 

Un element vide (empty) se declare : 

< ! ELEMENT nom_de_r element EMPTY> 

Exemple 

<! element img empty> pour la balise <img /> en Xhtml. 

c. Les elements comprenant des caracteres a afficher 

Les elements comprenant des caracteres a afficher, generalement le contenu des balises, se notent : 

< [ELEMENT nom_de_l ' element (#PCDATA)> 

Exemple 

< ! element p (#pcdata)> pour la balise de paragraphe <p> en Xhtml. 

d. Les elements avec des elements enfant 

< [ELEMENT nom_de_l 'element (e 1 ement_en f ant , e 1 ement_en f ant ,...)> 

Exemple 

< ! ELEMENT <enfants ( f i 1 s , f i 1 1 e ) > 

Lorsque des elements enfant sont declares, ces elements enfant doivent apparaitre dans le meme ordre dans le 
document XML. 

En outre, les elements enfant doivent etre declares. 

< ! ELEMENT <enfants ( f i 1 s , f i 1 1 e ) > 
< ! ELEMENT fils (#PCDATA)> 
< ! ELEMENT fille (#PCDATA)> 

e. Les elements avec une seule occurrence 

Les elements enfant qui doivent apparaitre seulement une fois dans le code de I'element parent se notent : 

< ! ELEMENT nom_de_l ' element ( e 1 ement_en f ant ) > 

Exemple 

< ! ELEMENT adherent (nom)> 

L'element enfant nom doit apparaitre une fois et seulement une fois dans I'element parent adherent. 

f. Les elements avec au minimum une occurrence 

Les element qui peuvent apparaitre plusieurs fois se declarent : 

< ! ELEMENT nom_de_l' element ( e 1 ement_en f ant + ) > 

Exemple 

< ! ELEMENT adherent ( t e 1 ephone + ) > 
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Le signe + declare que I'element enfant telephone doit apparaitre une fois mais peut aussi apparaitre plusieurs fois 
dans I'element parent adherent. 

g. Les elements avec au minimum zero occurrence 

Les elements facultatifs qui peuvent ne pas apparaitre (zero occurrence) ou apparaitre plusieurs fois se notent : 

< ! ELEMENT nom_de_l' element ( e 1 ement_en f ant * ) > 

Exemple 

< ! ELEMENT adherent ( t e 1 ephone f ixe * ) > 

Le signe * declare que I'element enfant teiephonefixe peut ne pas apparaitre, tout comme il peut apparaitre 
plusieurs fois dans I'element adherent. 

h. Les elements avec zero ou une occurrence 

Les elements qui peuvent apparaitre qu'une fois ou etre absents se definissent : 

< ! ELEMENT nom_de_l' element ( e 1 ement_en f ant ? ) > 

Exemple 

< ! ELEMENT adherent (adresselP?) > 

Le signe ? declare que I'element enfant adresselP peut etre absent ou apparaitre une seule fois dans I'element 
parent adherent. 

i. Les elements alternatifs 

Lorsque des options (le ou logique) sont autorisees dans les elements enfants, celles-ci se declarent : 

<!ELEMENT nom_de_l 'element ( ( e 1 erne nt_en fan t I e 1 erne nt_en fan t ) ) > 

Exemple 

< ! ELEMENT telephone ( ( na t i ona 1 I i n t e r nat i on a 1 ) ) > 

L'exemple declare que I'element parent telephone peut contenir I'element enfant national ou I'element enfant 

international. 

Appliquons une DTD interne a notre fichier XML. 



<?xml version="l . 0" encoding=" ISO-8 8 5 9-15 " ?> 

<famille> 

<enf ants> 

<f ils>Loic</f ils> 

<f ille>Marine</f ille> 

</enf ant> 

</f amille> 



Celui-ci devient : 



<?xml version=" 1 . 0 " " standalone="yes " ?> 

<!DOCTYPE famille [ 

< ! ELEMENT famille (enfants?)> 

< ! ELEMENT enfants (fils*, fille*)> 

< ! ELEMENT fille (#PCDATA)> 

<! ELEMENT fils (#PCDATA)> 

]> 

<f amille> 
<enf ants> 
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<f ille>Marine</f ille> 
</enf ants> 
</f amille> 



Commentaires : 

• Lorsqu'un doctype interne est defini, il faut declarer que le fichier est independant (standaione="yes") dans le 
prologue XML. 

• L 'element racine est declare dans le debut du DOCTYPE (<!doctype famine). 

• Le contenu du DOCTYPE est encode entre des crochets ouvrants et fermants. 

• La ligne <!element famine (enfants?)> declare que la balise <famiiie> contient la balise <enfants>. Le 
signe ? prevoit le cas des families sans enfants. 

• La ligne <!element enfants (fils*, fiiie*)> declare que la balise <enfants> contient les balises <fiis> et 
<fiiie>. Le signe * est prevu pour le cas ou une descendance n'est compose que d'un ou plusieurs fils ainsi 
que d'une ou plusieurs fille(s). 

• Le DOCTYPE se termine par le signe >. 



2. DTD externe 

Le DTD externe suit la syntaxe suivante : 

<!DOCTYPE element-racine SYSTEM " nom_du_f i ch i e r . dt d " > 

Le meme fichier que ci-dessus est alors : 



<! DOCTYPE famille SYSTEM "parent . dtd"> 
<?xml version=" 1 . 0 " standalone="no" ?> 
<famille> 
<enf ants> 



<f ille>Marine</f ille> 
</enf ants> 
</f amille> 



Le fichier de DTD externe (ici dans le meme repertoire) parent. dtd contient : 



< ! ELEMENT famille (enfants?) > 

< ! ELEMENT enfants (fils*, fille*)> 

< ! ELEMENT fille (#PCDATA)> 

< ! ELEMENT fils (#PCDATA)> 



Mais il est aussi possible de faire reference a un DTD externe situe sur un autre site comme pour, par exemple, le 
XHTML : 

<!DOCTYPE html PUBLIC " — / /W3C//DTD XHTML 1.0 Strict//EN" 
"http : //www .w3.org/TR/xhtmll /DTD /xhtml 1 -strict. dtd" > 



Un document est dit valide s'il respecte les regies specifiques de son DOCTYPE. 



II existe une autre methode pour definir les DTDs, non plus en SGML mais en XML, c'est le XML Schema. 

Le XML Schema est un langage de description de format de document {XML Schema Description), encode en XML, 
permettant de definir la structure d'un document XML. Ce fichier de description de structure tient le role de DTD et 
permet egalement de valider le document XML. 




En aparte 



4 - 
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Afficher le XML avec CSS 



Pour afficher les balises XML, on peut faire appel aux feuilles de style CSS, maintenant classiques dans le paysage de la 
publication sur le Web. Pour chaque balise "inventee" dans le fichier XML, un element de style va etre integre pour 
I'affichage par le navigateur. 

Voici un exemple des possibilites des feuilles de style CSS associees a un document XML. 
Soit notre document XML de depart : 

<?xml version="l . 0" encoding=" ISO-885 9-15 " ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 

<editeur>Columbia Tristar</editeur> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 

<editeur>Virgin France</editeur> 

</mp3> 

<mp3> 

<titre>>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

<editeur>Mercury</editeur> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<editeur>Ar iola</editeur> 
</mp3> 

</ compilation> 

Affiche dans le navigateur, ce code XML s'affiche comme suit : 



© ENI Editions - All rigths reserved 



- 1- 



w |B C:\Pocuments and Se v | *t X 



C:\Documents and Setting. 



<?xml version="1.0" encoding="ISO-8859- 15" ?> 
- <compilation> 

- <mp3> 

<ti tre >Sa r ba ca n e </ ti tre > 
<artis te >Francis Cabrel </ artiste > 
<date>1990</date> 
<editeur>Columbia Tristar</editeur> 
</mp3> 

- <mp3> 

<ti tre Nickel </ ti tre > 
<artiste>Alain Souchon</artiste> 
<date>1991</date> 
<editeur>Virgin France</editeur> 
</mp3> 

- <mp3> 

<titre>Sheller en solitaire</titre> 
<artiste>William Sheller</artiste> 
<date>1992</date> 
<editeur>Mercury</editeur> 
</mp3> 

- <mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<editeur>Ariola</editeur> 
</mp3> 
</compilation> 



j Poste 



+ v 100% 



Un fichier .ess est ajoute, voici son contenu (xmlcss.css) : 



compilation , mp3 { ) 
titre { display: block; 

width: 250px; 
font-size: 12pt; 
font-family: Arial; 
font-weight: bold; 
background-color: #9cf; 
color: black; 
padding-left: lOpx; } 
artiste { display: block; 

font-size: 12pt; 
padding-left: lOpx; } 
date { display: block; 

font-size: 12pt; 
color: red ; 
font-weight: bold; 
padding-left: lOpx; } 
editeur { display: block; 

font-size: llpt ; 
font-style: italic; 
font-family: Arial ; 
padding-left: lOpx; } 



Apres avoir ajoute un lien vers le fichier ess dans le fichier XML 
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<? xml - st yl e sheet hre f = " xmlcs s . cs s " t ype = " t ext / cs s " ? > 
Le code complet devient : 



<?xml version="l . 0" encoding=" ISO-885 9-15 " ?> 
<?xml-stylesheet href="xmlcss . ess" type="text/css"?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 

<editeur>Columbia Tr istar</editeur> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 

<editeur>Virgin France</editeur> 

</mp3> 

<mp3> 

<titre>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

<editeur>Mercury</editeur> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<editeur>Ar iola</editeur> 
</mp3> 

</compilation> 



On obtient finalement dans le navigateur 



QdlS 



C:\Documents and Se v 



Live Se 



'0 C:\Documents and Setting. 



Sarbacane 

Francis Cabrel 
1990 

Columbia Tristar 
Nickel 

Alain Souchon 
1991 

Virgin France 
Sheller en solitaire 

William Sheller 
1992 
Mercury 
Cache derriere 

Laurent Voulzy 
1993 
Ariola 



^ Poste de travail 



% 100% 



Assez efficace, non ?... Mais il y a encore un autre moyen, plus performant et ayant des possibilites plus etendues 
afficher du XML avec le XSL soit le langage de feuilles de style extensible : le pendant du XML aux feuilles de style CSS. 
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Afficher le XML avec XSL 



Pour afficher des documents XML, il est necessaire de disposer d'un mecanisme qui permettrait de decrire I'affichage du 
document dans le navigateur. Les feuilles de style CSS constituent un de ces mecanismes mais le XSL (extensible 
Stylesheet Language) est de loin un langage de feuille de style plus adapte au XML et done plus performant. 

Nous y reviendrons en detail au chapitre Introduction au XSL. 

A seule fin de demonstration, voici un exemple des possibilites du XSL associe a un document XML. 
Reprenons notre document XML de depart : 



<?xml version="l . 0" encoding=" ISO-8 85 9-15 " ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 

<editeur>Columbia Tristar</editeur> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 

<editeur>Virgin France</editeur> 

</mp3> 

<mp3> 

<titre>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

<editeur>Mercury</editeur> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<editeur>Ariola</editeur> 
</mp3> 

</compilation> 



On ajoute un fichier XSL (simple. xsl) dont voici le contenu : 



<?xml version="l . 0" encoding=" ISO-8 85 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http: //www. w3 .org/ 199 9/XSL/Trans form" > 

<xsl : template match="/"> 

<html> 

<body style=" font-family : Arial; font-size: 12pt;"> 

<xsl : for-each select="compilation/mp3"> 

<div style="background-color : #9cf; color: black; "> 

<span style=" font-weight : bold; padding-left: 4px"> 

<xsl : value-of select =" t itre " /></span> 

- <xsl : value-of select="art iste " /> 

</div> 

<div style="margin-lef t : 20px; font-size: llpt"> 

<span><xsl : value-of select="date" /> 

</span> 

<span style=" font-style : italic; "> 
<br/> 

<xsl : value-of select="editeur " /> 

</span> 

</div> 

</xsl : f or-each> 

</body> 

</html> 

</xsl : template> 
</xsl : stylesheet> 



Apres avoir ajoute un lien vers le fichier XSL dans le fichier XML : 
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< ? xml - s t y 1 e s hee t type="text /xsl " hr e f = " s imple . xs 1 " ? > 



Le code complet devient : 



< rxmi version— i.u encoding- ibu-oooy- 


■ 1 5 " ? > 


<?xml-style sheet type= "text /xsl " href = 


'simple . xsl " ?> 


*^ comp ilation^* 




<mp 3 




<titre>Sarbacane</ titre> 




<artiste>Francis Cabrel</ artiste> 




<aate>i y y u</ aate> 




<editeur> Columbia Tristar</ editeur> 




< / mp 3 > 




<mP > 




<t it re>Nickel</t itre> 




<art iste>Alain Souchon</ artiste> 




<aate>i y y i< / ctate> 




<editeur>Virgin France</ editeur> 




< / mp 3 




<mP > , 




<titre>Sheller en solitaire</titre> 




<artiste>William Sheller</ artiste> 




<aate>iyyz</aate> 




<edit eur>Mercury< /editeur > 




< / mp 3 > 




<mp3> 




<titre>Cache derriere</titre> 




<artiste>Laurent Voulzy</artiste> 




<date>1993</date> 




<editeur>Ariola</editeur> 




</mp3> 




</compilation> 





On obtient finalement : 









C:\Documents and Se v 


s 


~ ive Se 












ik $1 I C:\Documents and Setting. . . 




i a- 














Sarbacane - Francis Cabrel 








1990 

Columbia Tristar 








Nickel - Alain Souchon 




■■ 




1991 

Virgin France 








Shelter en solitaire - William Sheller 




1992 
Mercury 








Cache derriere - Laurent Voulzy 




1993 
Ariola 








j Poste de travail 


+„ 100% - 
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Afficher du XML dans du Xhtml 



On peut toujours incorporer du XML dans un fichier Xhtml ou Html avec la balise <xmi> . . . </xmi>. Mais, en toute 
logique, quand les navigateurs rencontrent des balises incorrectes ou inconnues, rien n'est affiche. Ce sera le cas avec 
vos balises XML incorporees dans un fichier Xhtml (ou Html). Heureusement, nous allons utiliser une technique intitulee 
"Tlots de donnees" (Data Islands). 

Cette technique offre une possibility assez interessante. Dans un fichier Xhtml, on peut creer un "ilot de donnees" XML, 
se trouvant dans un fichier XML distinct, et en extraire des donnees que Ton pourra alors inclure dans le document 
Xhtml. 

Dans le fichier Xhtml, on va designer le fichier XML exterieur par un identifiant id : 

<xml i d= " f i chie r xml " s r c= " exemp le . xml " >< / xml > 

Ensuite, dans un tableau Xhtml, que Ton relie par un attribut a la source des donnees au moyen de I'identifiant id 
designe plus haut (datasrc="#id"), des donnees du fichier XML peuvent etre reprises. Pour ce faire, un attribut de 
champ de donnees ayant pour valeur le nom de la balise XML est utilise (datafid= "baiise_xmi"). 

Voila le fichier XML exterieur (exemple.xml) : 



<?xml version="l . 0" encoding=" ISO-885 9-15 " ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis Cabrel</artiste> 

<date>1990</date> 

<editeur>Columbia Tr istar</editeur> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 

<editeur>Virgin France</editeur> 

</mp3> 

<mp3> 

<titre>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

<edi teur>Mer cur y< /edit eur> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<editeur>Ar iola</editeur> 
</mp3> 

</ compilation> 



Un fichier Xhtml (ou Html) doit etre cree dans lequel on reprend des donnees du fichier XML et plus precisement le 
contenu des balises <titre>, <artiste> et <date>. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
www. w3 . or g/TR/xhtmll /DTD /xhtml 1-transitional . dtd"> 

<html xmlns="http :/ /www . w3 . org/1 999/xhtml " xml : lang=" f r " lang="fr"> 
<head> 

<title>Data Islands</title> 

<meta http-equiv=" Content -Type" content="application/xhtml+xml; 

charset=iso-8859-15" /> 

</head> 

<body> 

<xml id=" f ichierxml " src="exemple . xml"x/xml> 

<table datasrc="#f ichierxml"> 

<tr> 

<td><span dataf ld="titre"x/spanx/td> 
<td><span dataf ld="artiste"x/spanx/td> 
<td>Annee : <span dataf ld="date"x/td> 
</tr> 
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</table> 

</body> 

</html> 

Ajoutons a ce fichier quelques declarations de feuilles de style CSS afin d'ameliorer sa presentation. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
www. w3 . or g/TR/xhtmll /DTD /xhtml 1-transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 
<head> 

<title>Data Islands</title> 

<meta http-equiv=" Content -Type" content="application/xhtml+xml ; 
charset=iso-8859-15" /> 

<meta http-equiv="Content-Style-Type" content="text/css " /> 

<style type="text/css"> 

table { border-collapse: collapse; 

border: solid black lpx; } 
td { padding: 3px; 

border: solid black lpx;} 
</style> 
</head> 
<body> 

<xml id=" f ichierxml " src="exemple . xml"x/xml> 

<table datasrc=" #f ichierxml " style=""> 

<tr> 

<td><span dataf ld="titre"x/spanx/td> 
<td><span dataf ld="artiste"x/spanx/td> 
<td>Annee : <span dataf ld="date"x/td> 

</tr> 
</table> 
</body> 
</html> 

On obtient finalement : 



0 Data Islands - Windows Internet Explorer 


_ n x 




& C:\Documents and Se 


V 




1*1 


Live Search 



* Data Islands 



Sarbacane 


Francis Cabrel 


Annee : 1990 


Nickel 


Alain Souchon 


Annee : 1991 


Shefler en solitaire 


William Sheller 


Annee : 1992 


Cache derriere 


Laurent Youlzy 


Annee : 1993 



'j Poste de travail ■•v 100% » 



- 2- 
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Des editeurs XML 



N'attendez pas de miracle des editeurs XML ! Etant donne qu'en XML vous concevez vous-meme vos balises, les editeurs 
XML ne sont que des outils d'aide a I'encodage et a la structuration de votre document. 

Les editeurs XML sont cependant d'une grande utilite si de nombreuses balises recurrentes se presentent dans votre 
document XML. En outre, s'il est necessaire d'actualiser souvent les donnees du fichier XML, il est plus facile de retrouver 
une information dans I'interface d'un editeur XML que dans une quantite innombrable de balises du code source. 



1. Microsoft XML Notepad 2007 



A la fin 2006, Microsoft a fortement remanie son logiciel XML Notepad 1.0, devenu completement desuet car il datait de 
1998. Ainsi XML Notepad 2007 (logiciel gratuit) se positionne comme un editeur XML simple et parfaitement adapte a 
I'apprentissage du XML. 

Microsoft XML Notepad 2007 
Version 2.1 




XML Notepad 2007 est une application qui vous permet de creer et de modifier rapidement des documents XML. 
L'interface presente deux volets : celui de gauche affiche graphiquement la structure arborescente du document et 
celui de droite les valeurs du fichier. Des elements, des attributs, des commentaires peuvent etre ajoutes dans le volet 
de gauche et leurs valeurs peuvent etre encodees dans la zone de texte du volet droit correspondant. 

II est aussi possible de deplacer des elements par un simple glisser/deposer (drag/ drop) et de visualiser le document 
en direct grace a un document XSL associe. 



■ Ouvrons notre document XML (File - Open) dans XML Notepad 2007. 



£3 XML Notepad - ( -J □][><] 



File Edit View Insert Window Help 

J Jj A * Jft X M M sfc 

Tree View I XSL Output 



C xral 
B It) compilation 













a & 


titre 


Sarbacane 






artiste 


Francis Cabrel 




i c 


date 


1990 




a & 


editeur 


Columbia Tristar 


r~ 


S rap 3 








a c 


titre 


Nickel 




i c 


artiste 


Alain Souchon 






date 


1991 




a & 


editeur 


Virgin France 


ffl 


mp3 






+ 


1^) rap3 







version="1.0" encoding="ISO-8859-15' 



On remarque directement, dans le panneau de gauche, I'approche visuelle du document XML. 

XML Notepad, comme la plupart des editeurs XML, met I'accent sur la structuration et I'arborescence des donnees que 
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ne revelent pas directement le code source et I'encodage brut des balises. 

La balise <compiiation> . . . </compiiation> est I'element racine obligatoire, soit celui qui occupe la position la plus 
haute dans la hierarchie. Elle est consideree comme I'element parent de toutes les autres balises du document. 

La balise <mp3> . . . </mp3> est une descendance de la balise parent <compilation>. Elle fait partie des elements enfant 
{child) de celle-ci. 

Cette balise <mp3> est a son tour parent de differentes balises. Ainsi, les balises <titre>, <artiste>, <date> et 
<editeur> sont des balises enfant de cette derniere. 

L'arborescence ou I'arbre de notre document XML peut done se representer comme suit. 

• \ 

compilation 

■ 



mp3 
i i 





1 


1 


1 


titre 




artiste 




date 




editeur 

- 



L'affichage de l'arborescence du document est des plus utile pour illustrer le DOM (Document Object Model), aborde 
dans le chapitre Le DOM (Document Object Model). 

Pour une rapide prise en main, nous allons reproduire notre document XML avec le logiciel XML Notepad 2007. 

<?xml version="l . 0" encoding=" ISO-8859-15" ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 

<editeur>Columbia Tristar</editeur> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 

<editeur>Virgin France</editeur> 

</mp3> 

Etc. 



■ Commengons par ouvrir un document vierge, File - New. 

II faut tout d'abord encoder la declaration de document XML, Insert - Processing Instruction - Before. Une zone de 
texte apparait dans le panneau de gauche, il faut introduire au clavier le mot xml et dans la zone de texte 
apparaissant dans le panneau de droite version="1.0" encoding="ISO-8859-15". 



O XML Notepad - * 






File Edit View Insert Window Help 




4 


/flag 







Tree View XSL Output 



C xml |version="1.0" encoding=" ISO-8859-15" 



■ II faut ensuite veiller a determiner I'element racine <compiiation>, Insert - Element - After, on complete la zone de 
texte du panneau de gauche par le mot compilation. 



- 2- 
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Tree View XSL Output! 



§t xml 

& Compilation 



version="1.0" encoding="IS0-8859-15" 



T 



Maintenant traitons des elements enfant <mp3>. Apres avoir selectionne la ligne compilation, Insert - Element 
Child il faut introduire au clavier le mot mp3. 



Tree View 


XSL Output 




£ xml 




vers ion- "1.0" encoding="ISO-8859-15" 


S Compilation 




ft mp3 















On remarque que I'icone en face de compilation n'est plus une puce mais un dossier, signe que la balise <compiiation> 
est devenu une balise parent. 

■ Apres avoir selectionne le niveau mp3, preoccupons-nous des balises enfant de cette derniere. Insert - Element - 
Child puis introduire au clavier le mot titre et son contenu Sarbacane dans le panneau de droite. 



Tree View 1 XSL Output! 


£ xml 


version="1.0" encoding "ISO-8859- 15" 


E ^ Compilation 




□ L3 mp3 




E £) titre 


Sarbacanne 4 


t<4%%****** 





On procede de meme pour les autres balises (artiste, date et editeur). Apres avoir selectionne I'element parent mp3, 
Insert - Element - Child puis complete les informations. 



Tree View XSL Output 



£t xml 

B ^ Compilation 

H C) mp3 

+ C titre 
EE artiste 
a C date 
51 £> editeur 



version="1.0" encoding="IS0-8859-15" 



Sarbacanne 
Francis Cabrel 
1990 

Columbia Tristar 



V ^ ^ 4^ 4 4. ^ 4. ^ *S A. * *N A. 



■ II faut maintenant proceder de meme avec les autres blocs mp3 du document. Apres avoir selectionne mp3, Edit - 
Duplicate puis modifier les informations dans le panneau de droite. 
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Tree View |XSL Output) 



4 



6 xml 

B Compilation 



version 1 



i= " 1 . 0 " encoding= " ISO-8859- 15 



rr 




HD 4* titre 

ft] ^ artiste 
ft] £ date 

EE ^ editeur 



Sarbacanne 
Francis Cabrel 
1990 

Columbia Tristar 



B £j mp3 



ffl ^ titre 

ft] ^ artiste 
E 4* date 
EE £ editeur 



Nickel 

Alain Souchon 
1991 

Virgin France 



\ 



On repetera I'operation autant de fois pour inserer toutes les donnees du document XML. 

■ Apres avoir enregistre le document (File - Save As...), le code source du fichier sera sous sa forme classique. 



Dans le paysage des editeurs XML professionnels, un editeur se detache du lot. En effet, XMLSpy existe des les debuts 
du XML et I'interface et son utilisation sont devenues de plus en plus sophistiquees. XMLSpy d'Altova est tres 
largement adopte par les concepteurs professionnels. 

XML Spy est bien plus qu'un editeur de balises XML car il permet aussi : 

• de valider en direct le document XML genere ; 

• de saisir un document XSLT ; 

• de debugger un document XSLT ; 

• de generer les DTD ; 

■ de convertir les DTD en Schema ; 

• etc. 

Bien qu'il existe une version freeware (XMLSpy authentic 2007), la version shareware (limitee a 30 jours) de la version 
professionnelle (XMLSpy Professional Edition 2007) permet quant a elle, de decouvrir reellement les multiples 
potentialites du logiciel. 



2. Altova XMLSpy 2007 




Pour donner un exemple de rapide prise en main de I'outil, reproduisons le meme fichier XML. 



■ Ouvrez un fichier XML, soit File - New puis selectionnez le type de document xml - XML Document et OK. 
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Create new document 



Select the type of document you wish to create: 



\J\\K\ 



xdr 


XML-Data Reduced Schema 




xhtml 


Extensible Hypertext Markup Language 




xml 


DocBook 4.2 Article 




xml 


DocBook 4.2 Book 




ml 


EJB 2.0 Deployment Descriptor 




xml 


IAS XBRL Document 




ml 


J2EE 1 .3 Application 




xml 


J2EE 1 .3 Application Client 


I 


xml 


J2EE Connector 1 .0 Resource Adapter 




xml 


Servlet 2.3 Deployment Descriptor 




xml 


XML Document 




xa 


XML Querv Lanauaae 


V 



Select a StyleVision Stylesheet.. 



□K 



Cancel 



II faut noter I'eventail des possibilites offertes permettant de traiter differents types de document. 



New file 








If you intend to create a new XML document instance based on a 
certain schema or DTD, XMLS py can automatically add the 
proper assignment for you • in this case please select whether you 
intend to base your document on a DTD or Schema: 


OK | 




Cancel 


©DTD 




O Schema 




Otherwise please click the cancel button to begin with a new 
empty document. 





A ce stade de prise en main, declinez par Cancel la boite de dialogue proposee par XML Spy permettant d'inclure un 
DTD existant. 

Dans la sous-fenetre reservee a I'edition, encodez la balise racine <compiiation>. 



1 

2 


<?xml version="1 .0" encoding="UTF-8"?> ^ 
<compilation></compilation> 


< 4 


I Text 


Grid 


Schema/WSDL 


Authentic 


Browser 







Vous remarquez au bas de la fenetre d'edition, les boutons Text, Grid, Schema/ WSDL, Authentic, Browser. Cliquez 
sur le bouton Grid pour passer en mode de creation graphique, ce qui est plus convivial. 
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*| XML 












= version 


1 .0 






J 


= encoding 


UTF-8 






O compilation 














> 


Text 1 1 Grid | 


Schema/WSDL 


Authentic 


Browser \ 











Encodons a present, I'element enfant mp3. Apres avoir clique dans la zone compilation, menu XML - Add child 
Element, encodez la balise mp3. La meme operation peut etre realisee a partir du bouton droit. 



4 


XML 












= version 


1 .0 


< 






= encoding 


UTF-8 






compilation 












<>mp3 















Les elements enfant de mp3 peuvent a present etre enregistres. Apres avoir selectionne la zone mp3, construisez 
quatre elements soit XML - Add child - Element operation que Ton repete quatre fois et le nom des balises titre, 
artiste, date et editeur est encode. 



A. 


XML 
















version 


1 .0 








encoding 


UTF-8 




compil.Ttion 
















mp3 














titre 












artiste 












date 












editeur 







Pour reproduire un second bloc mp3, selectionnez la zone mp3, Edit - Copy puis Edit - Paste. 



© ENI Editions - All rigths reserved 



■H XML 



compilation 





version 


1 .0 




encoding 


UTF-8 










mp3 




(> litre 




() artiste 




<> date 








O editeur 






mp3 








litre 








artiste 








date 








editeur 





II ne reste plus qu'a encoder les donnees. 

II est possible de revenir a tout moment aux fichiers XML en cliquant sur le bouton Text pour visualiser le fichier sous la 
forme suivante : 



1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 



<?xml version="1 .0" encoding="UTF-8"?> 
Ep<compilation> 
<mp3> 
<titre/> 
<artiste/> 
<date/> 
<editeur/> 
</mp3> 
<mp3> 
<titre/> 
<artiste/> 
<date/> 
<editeur/> 
</mp3> 
</compilation> 



Text 



Grid 



SchemaMSDL 



Authentic 



Browser 



' J .''•'>! •'<<•<' \*->J 



Pour elaborer le DTD du document, c'est facile avec XMLSpy, Menu DTD/ Schema - Generate DTD/Schema. 



Generate DTD/Schema 



DTD/Schema file format 
0 DTD 

OW3C Schema 



OK 



Cancel 



K| Generate one shared type for all equal named elements 
0 Validate and resolve entities 



Et le DTD apparait ! 



<?xml version="l . 0" encoding="UTF-8 " ?> 

<! — DTD generated by XMLSpy v2007 spl (http://www.altova.com) — > 
< ! ELEMENT compilation ((mp3+))> 

< ! ELEMENT mp3 ( (titre, artiste, date, editeur) )> 
< ! ELEMENT titre (#PCDATA)> 
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< ! ELEMENT artiste (#PCDATA)> 

<! ELEMENT date (#PCDATA)> 

< [ELEMENT editeur (#PCDATA)> 



Ceci n'est vraiment qu'un tres bref apercu de XML Spy. Ses fonctionnalites sont en effet plus nombreuses et etendues. 



f> Pour completer I'etude du XML, I'auteur vous recommande I'ouvrage XML par la pratique - bases indispensables, 
^ concepts et cas pratiques de Sebastien Lecomte dans la collection Ressources Informatiques des Editions ENI. 
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Le XSL 



Le XSL pour extensible Stylesheet Language (langage extensible de feuilles de style) est une recommandation du 
consortium W3C datant de novembre 1999. II s'agit d'un standard dans le domaine de la publication sur le Web. Le XSL 
est en quelque sorte le langage de feuilles de style du XML. Un fichier de feuilles de style XSL reprend des donnees XML 
et produit la presentation ou I'affichage de ce contenu XML selon les souhaits du concepteur de la page web. 

Le XSL comporte en fait 3 langages : 

• Le XSLT(XSZ_ Transform), langage qui Transforme un document XML en un format, generalement en Html ou 
Xhtml, reconnu par un navigateur. 

• Le Xpath langage qui permet de definir et d'adresser des parties de document XML. 

• Le XML Formatter langage permettant de "formater" ou transformer du XML de fagon a le rendre compatible avec 
des organismes PDA ou des unites de reconnaissance vocale. 

Pour la suite de ce tutorial, nous nous limitons aux langages XMLT et Xpath. Et comme dans la litterature relative a ce 
sujet, ils sont identifies sous le vocable general de XSL. 

Le XSL est derive du XML, reprenant ainsi toutes les regies de syntaxe du XML (detaillee au chapitre Introduction au 
XML). 

Soit en bref : 

• les balises sensibles a la casse, s'ecrivent en minuscules. 

• toutes les balises ouvertes doivent etre imperativement fermees. 

• les balises vides auront aussi un signe de fermeture soit <baiise/>. 

• les balises doivent etre correctement imbriquees. 

• les valeurs des attributs doivent toujours etre mises entre des guillemets. 

• le document XSL devra etre "bien forme". 

Le XSL ne permet pas uniquement I'affichage de XML. II permet aussi : 

• de selectionner une partie des elements XML. 

• de trier des elements XML. 

• de filtrer des elements XML en fonction de certains criteres. 

• de choisir des elements. 

• de retenir des elements par des tests conditionnels. 

• de transformer un document. 
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Un premier document XSL 

Avant de debuter, il est utile de preciser que : 

■ le XSL est derive du XML. Le document XSL reprend done la structure et la syntaxe de n'importe quel document XML. 

■ le document XSL comporte un document Html ou Xhtml qui sera quant a lui reconnu par le navigateur et qui servira de 
support a tout ou partie des donnees du document XML associe. 

■ le XSL fonctionne avec une ou plusieurs templates, sorte de gabarit, pour definir comment afficher des elements du 
fichier XML. Les elements concernes du fichier XML sont determines par I'attribut match. 

Voici un premier document XSL. Sa conception est basique mais n'est pas compliquee ; ce document sera etoffe en cours 
d'etude. 

<?xml version="l . 0" ?> 

Le XSL est derive du XML. Aussi, il est normal que le document XSL commence par la declaration de document XML, soit 
<?xml version = "1.0"?>. 

<xsl : stylesheet version=" 1.0" 

xmln s :xsl = " http://www.w3.org/1999/XSL/Transform"> 

Cette ligne declare que le document est au format XSL. 

L'attribut xmlns fait reference a I'espace de nommage (namespace) utilise. Le namespace officiel du W3C est : 
xmlns:xsl = " http://www.w3.org/1999/XSL/ Transform. 

<xsl : template match="/"> 

Voici une balise template et son attribut match. 

Cette balise template va determiner un gabarit dans lequel des elements du fichier XML sont transformes sous une forme 
affichable par le navigateur. 

Les elements du fichier XML sont determines par l'attribut match="/". La barre oblique ("/") entre guillemets signale que 
toutes les balises XML du document associe a partir de la racine sont concernees. 

<html> 
<head> 

<title>XSL</title> 

</head> 

<body > 

II s'agit du debut de la partie Html ou Xhtml servant de support pour I'affichage du document dans le navigateur. 
Attention, les balises doivent etre ecrites en minuscules ! 

Diverses balises Xhtml et XSL... 

La partie Html ou Xhtml du document. 

</body> 
</html> 

Fin de la partie en Html ou Xhtml. 

</xsl : template> 

La fermeture de la balise de template. 

</xsl : stylesheet> 

Le document XSL se termine obligatoirement par la fermeture de la balise de declaration de document XSL. 

Attention ! Pour que ce fichier XSL soit d'une quelconque utilite, il ne faut pas oublier de faire reference a celui-ci dans le 
fichier XML. 
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Ainsi cette ligne doit etre ajoutee dans le fichier XML 



<?xml-stylesheet type = "text/xsl" href = " nom_du_f i ch i e r_x sl.xsl"?> 

Cette balise indique au navigateur qu'une feuille de style (stylesheet) de type XSL est associee au fichier XML et qu'il doit 
aller chercher le fichier a I'adresse indiquee par I'attribut href. 

Voici notre premier document XSL : 

<?xml ver sion=" 1 . 0 " ?> 

<xsl : sty lesheet version=" 1 . 0 " 

xmlns :xsl="http: //www.w3 . org/ 1 99 9/XSL/Transf orm" > 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

Diverses balises Xhtml et XSL... 

</body> 

</html> 

</xsl : tempi ate > 
</xsl : sty lesheet > 
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Un premier exemple XSL 

Apres cet apergu theorique, etudions un exemple detaille : une compilation de composition musicale MP3. 
Voici un fichier XML que nous allons utiliser tout au long de ce chapitre. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

<mp3> 

<titre>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 

<artiste>Laurent Voulzy</artiste> 

<date>1993</date> 

</mp3> 

<mp3> 

<titre>Rio Grande</titre> 

<artiste>Eddy Mitchell</artiste> 

<date>1994</date> 

</mp3> 

<mp3> 

<titre>Samedi soir sur la Terre</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1995</date> 

</mp3> 

<mp3> 

<t itre>Def oule sent imentale</titre> 
<artiste>Alain Souchon</artiste> 
<date>1996</date> 
</mp3> 

</compilation> 



On I'enregistre sous le nom xsldemo avec une extension .xml (soit xsldemo.xml) dont voici un apergu dans Internet 
Explorer : 
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EM*' 






Si C:\Documents and Se v 


|*t]fx] Live Search 






C:\Documents and Setting... 







<?xml version="1.0" encoding="ISO-8859- 1" ?> 
- <compilation> 



- <mp3> 

<ti tre >Sa r ba ca n e </ ti tre > 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 
</mp3> 

- <mp3> 

<titre Nickel </ti tre > 
<artiste>Alain Souchon</artiste> 
<date>1991</date> 
</mp3> 

- <mp3> 

<titre>Sheller en solitaire</titre> 
<artiste>William Sheller</artiste> 
<date>1992</date> 
<ymp3> 

- <mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
</mp3> 

Passons maintenant au fichier XSL. 

Le but de I'exemple est de representer la compilation sous forme d'un tableau de trois colonnes. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : sty lesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9 /XSL/ Trans f orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding=" 3 " > 

<tr style="background: #9cf ; "> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<tr> 

<td><xsl : value-of select="compilat ion/mp3/date " /></td> 

<td><xsl : value-of select=" compilat ion/mp3/t it re" /></td> 

<td><xsl : value-of select=" compilat ion/mp3 /art iste " /></td> 

</tr> 

</table> 

</body> 

</html> 

</xsl : template> 
</xsl : stylesheet> 



Apres les balises de depart d'un fichier XSL, on elabore un tableau tout a fait classique en Xhtml. Dans la premiere 
cellule, une information de date est renseignee, soit la balise <xsi: value-of /> avec 
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rattributseiect="compiiation/mp3/date" qui indique comme chemin d'acces dans le fichier XML la balise racine 
compilation, la balise mp3 et la balise date. Dans la deuxieme cellule, une information de titre est renseignee, soit la 
balise <xsi : vaiue-of /> avec I'attribut seiect="compiiation/mp3/titre" qui indique comme chemin d'acces dans le 
fichier XML, la balise racine compilation, la balise mp3 et la balise titre. Enfin la derniere cellule est consacree a 
I'information relative a I'artiste avec I'attribut seiect="compiiation/mp3/artiste". 

Le fichier est enregistre sous le nom xsldemo avec une extension .xsl (xsldemo.xsl). 

Afin d'associer ce fichier XSL au fichier XML precedent, la balise suivante est ajoutee : 



<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " hr e f = " xs Idemo . xs 1 " ? > 



Le code complet de ce dernier devient : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsldemo . xsl " ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Et une fois affiche dans un navigateur, notre fichier XML est devenu un tableau plus presentable. 



0 XSL - Windows Internet Explorer 


EH* 


<Q ▼ C:\Documents and Se v 


H 


|X Live 


■ 




'V - 





Les victoires de la musique 



Annee 


Album 


Artiste 


1990 


Sarbacane 


Francis Cabrel 



j Poste de travail 



, 100% 



Par contre, une seule reference de la compilation est affichee dans le tableau. Pour afficher toutes les references, 
proceder comme suit : 

Le fichier XML de depart reste inchange. 

Considerons le fichier XSL dans lequel la balise<xsi : tor-each /> (for-each signifie pour chaque) avec comme attribut 
seiect="compiiation/mp3" va etre ajoutee. Dans le fichier XML de balises, une ligne de tableau (<fr>) est inseree, 
contenant des cellules <td> dont voici le contenu : 



• balise date soit <xsi :vaiue-ot seiect="date" /> pour la premiere cellule ; 



• balise titre soit <xsi :vaiue-ot seiect="titre" /> pour la seconde cellule ; 



• balise artiste soit <xsi :vaiue-ot seiect="artiste" /> pour la troisieme cellule. 



Ce qui donne : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : sty lesheet version=" 1 . 0 " 
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xmlns :xsl="http: //www.w3 . org/ 1 99 9/XSL/Trans f orm" > 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding=" 3 " > 

<tr style="background: #9cf ; "> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<tr> 

<td><xsl : value-of select="date" /></td> 
<td><xsl : value-of select = "titre"/x/td> 
<td><xsl : value-of select = "artiste"/x/td> 

</tr> 

</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : tempi ate > 
</xsl:stylesheet> 

Le fichier est enregistre avec I'extension .xsl (xsldemol.xsl). 
II ne faut pas oublier de modifier le lien dans le fichier XML. Soit : 

<? xml - s t y 1 e sheet t ype = " t ext / xs 1 " hre f = " xs ldemo 1 . xs 1 " ? > 

Le code complet du fichier XML devient : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsldemol . xsl" ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Pour rappel, le fichier XML sans le fichier XSL prendrait la forme suivante. 
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EE*' 






Si C:\Documents and Se v 


|*t]fx] Live Search 






C:\Documents and Setting... 







<?xml version="1.0" encoding="ISO-8859- 1" ?> 
- <compilation> 

- <mp3> 

<ti tre >Sa r ba ca n e </ ti tre > 
<artiste>Francis Cabrel</artiste> 
<date>1990</date> 
</mp3> 

- <mp3> 

<titre Nickel </ti tre > 
<artiste>Alain Souchon</artiste> 
<date>1991</date> 
</mp3> 

- <mp3> 

<titre>Sheller en solitaire </titre> 
<artiste>William Sheller</artiste> 
<date>1992</date> 
</mp3> 

- <mp3> 

<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
<date>1993</date> 
<^mp3> 



II ne reste plus qu'a verifier que le fichier affiche bien toutes les references de la compilation. 



f' XSL - Windows Internet Explorer 



HUE 



l^^y ▼ [i§3 C:\Documents and Se X 4f X 
W Or 



»XSL 



'l - 



Les victoires de la musique 



Annee 


Album 


Artiste 


1990 


Sarbacane 


Francis Cabrel 


1991 


Nickel 


Alain Souchon 


1992 


Sheller en solitaire 


William Sheller 


1993 


Cache derriere 


Laurent Voulzy 


1994 


Rio Grande 


Eddy Mitchell 


1995 


Samedi soir svir la Terre 


Francis Cabrel 


1996 


Defoule sentimentale 


Alain Souchon 



"* Poste de travail 



"\ 100% 
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Trier avec le langage XSL 

Le langage XSL permet de trier des donnees d'un fichier XML associe, en ordre croissant ou decroissant. Ainsi, il suffit 
d'ajouter la balise <xsi:sort seiect=" ..."/> et I'attribut order="ascending" pour trier des donnees en ordre croissant 
ou order="descending" pour trier en ordre decroissant. 



Q Cette concision illustre bien la puissance du langage XSL. 
Exemple 

Reprenons notre fichier XML de depart (inchange). 

Dans le fichier XSL, nous allons trier notre compilation de mp3 en XML en ordre alphabetique croissant du nom des 
artistes. En outre, nous allons permuter les colonnes "Annee" et "Artiste" pour bien montrer que le XSL affiche les 
donnees du fichier XML selon le fichier Html ou Xhtml qu'il contient. 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9/XSL/Transf orm" > 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding="3"> 

<tr style="background: #9cf ; "> 

<td>Artiste</td> 

<td>Titre</td> 

<td>Annee</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<xsl:sort select="artiste" order="asoending" /> 
<tr> 

<td><xsl : value-of select="artiste"/x/td> 
<td><xsl : value-of select = "titre"/x/td> 
<td><xsl : value-of select="date" /></td> 

</tr> 

</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : tempi at e> 
</xsl:stylesheet> 

Le fichier est enregistre sous le nom xsl_order avec une extension .xsl (xsl_order. xsl). 
Afin d'associer ce fichier XSL au fichier XML, la balise suivante est ajoutee : 

<? xml - s t y 1 e sheet t ype = " t ext / xs 1 " href ="xsl_order. xsl" ?> 

Soit, 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_order . xsl" ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 
<artiste>Alain Souchon</artiste> 
<date>199K/date> 
</mp3> 
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Etc 



0 XSL - Windows Internet Explorer 



QUE 



^J^JI'' ^ C:\DocumentsandSe v +f ^ 



Live Search 



Artiste 


Thre 


Annee 


Alain Souchon 


Nickel 


1991 


Alain Souchon 


Defoule sentimentale 


1996 


Eddy Mitchell 


Rio Grande 


1994 


Francis Cabrel 


Sarbacane 


1990 


Francis Cabrel 


Samedi soir sur la Terre 


1995 


Laurent Youlzy 


Cache denier e 


1993 


William Sheller 


Sheller en solitaire 


1992 



'j Poste de travail 



81 100% - 



Pour trier la compilation par ordre alphabetique inverse, il suffit de modifier I'attribut order="descending" 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns : xsl="http : / /www . w3 . org/ 1 99 9/XSL/Transf orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding="3"> 

<tr style="background: #9cf ; "> 

<td>Artiste</td> 

<td>Titre</td> 

<td>Annee</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<xsl:sort select="artiste" order="descending" /> 
<tr> 

<td><xsl : value- of select = "artiste"/x/td> 
<tdxxsl : value-of select="titre"/x/td> 
<td><xsl : value-of select="date" /></td> 

</tr> 

</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : tempi at e> 
</xsl : stylesheet> 



- 2- 
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- □ X 



▼ g| C:\Documents and Se v \*f\ X 



arch 



XSL 



Artiste 


Titre 


Annee 


nm C"i_ 11 

\\ lfliani bhefler 


bhefler en solitaire 


1992 


Laurent Voofay 


Cache derriere 




Francis Cabrel 


Samedi soir sur la Terre 


1995 


Francis Cabrel 


Sarbacane 


1990 


Eddy Mitchell 


Rio Grande 


1994 


Alain Souchon 


Defoule sentimentale 


1996 


Alain Souchon 


Nickel 


1991 



^ Poste de travail 



& 100% 



Le fichier est enregistre sous le norm xsl_orderbis avec une extension .xsl (xsl_orderbis.xsl). 
Afin d'associer ce fichier XSL au fichier XML, la balise suivante est ajoutee : 

<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " hr e f = " xs l_or derbi s . xs 1 " ? > 

Soit, 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_orderbis . xsl " ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 
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Filtrer avec le XSL 



Le langage XSL permet aussi de filtrer les donnees du fichier XML associe selon des criteres tels que egal, different de, 
plus grand que, plus petit que. 

II suffit d'utiliser I'attribut select="chemin_d' acces [balise= # xxx' ] ". 
Les operateurs possibles sont : 

• = pour egal. 

• != pour different (non egal). 

• > pour plus grand que. 

• < pour plus petit que. 

Ceci vous parait un peu abstrait ? Voyons un exemple de filtre de donnees... 

Dans la compilation mp3, ne reprenons que le (ou les) titre(s) de I'artiste Alain Souchon. 

L'attribut select du fichier XSL devient select = "compilation/mp3 [artiste= 'Alain Souchon' ] ". 

Le fichier XML reste toujours inchange. 
Passons maintenant au fichier XSL. 

Nous allons reprendre dans notre compilation de mp3 en XML que le (ou les) titre(s) d'Alain Souchon. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : sty lesheet version=" 1 . 0 " 

xmlns :xsl="http:/ /www . w3 . org/ 1 99 9/XSL/Transf orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding="3"> 

<tr style="background: #9cf ; "> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3 [artiste=' Alain Souchon' ] "> 
<tr> 

<td><xsl : value-of select="date" /></td> 
<td><xsl : value-of select="titre"/x/td> 
<td><xsl: value-of select="artiste"/x/td> 

</tr> 

</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : tempi at e> 
</xsl : sty lesheet > 

Le fichier est enregistre sous le nom xsl_filter avec I'extension .xsl (xsl_filter.xsl). 
Afin d'associer ce fichier XSL au fichier XML, la balise suivante est ajoutee : 

<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " href ="xsl_f ilter . xsl" ?> 

Soit, 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
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<?xml-stylesheet type="text/xsl " href="xsl_f ilter . xsl" ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Ce qui nous permet d'afficher uniquement les albums d'Alain Souchon. 



Windows Internet Explorer 



SEE 



kLjai^p ▼ C:\Documents and 5e $ ( ■*» ] | X | 



Les victoires de la musique 



Annee 


Album 


Artiste 


1991 


Nickel 


Alain Souchon 


1996 


Defoule sentimentale 


Alain Souchon 



j Poste de travail 



%. 100% 
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Choisir avec le XSL 



La balise <xsl:if> ... </xsl : if > permet d'effectuer un choix dans les donnees du fichier XML. L'attribut match est ajoute 
pour indiquer I'element choisi. Ce qui donne : 

<xsl : if test="balise=' xxx' "> 
b a 1 i s e s Html 
</xsl : if > 

Nous allons illustrer ce choix par un exemple : ne faire apparaitre que le(s) titre(s) de Voulzy dans le fichier en XML de 
compilation de mp3. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9 /XSL/ Trans f orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding=" 3 " > 

<tr style="background: #9cf ; "> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<xsl:if test="artiste=' Laurent Voulzy' "> 
<tr> 

<td><xsl : value-of select="date" /></td> 

<td><xsl : value-of select="titre"/x/td> 

<td><xsl: value-of select="artiste"/x/td> 

</tr> 

</xsl : if > 

</xsl : f or-each> 

</table> 

</body> 

</html> 

</xsl : tempi at e> 
</xsl : stylesheet> 

Le fichier est enregistre sous le nom xsl_if avec I'extension .xsl (xsl_if.xsl). 

Afin d'associer ce fichier XSL au fichier XML de depart, la balise suivante est ajoutee : 

<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " href ="xsl_i f . xsl" ?> 

Le fichier XML complet devient : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_if . xsl" ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis CabreK/art iste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 
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Ce qui nous permet d'afficher uniquement la ligne du tableau correspondant a Laurent Voulzy. 



0 XSL - Windows Internet Explorer 



SEE 



f- f " C ^.Documents and Se v *f ^ 



& 4* j^XSL 



Les victoires de la musique 



Annee 


Album 


Artiste 


1993 


Cache denier e 


Laurent Voulzy 



'j Poste de travail 



\ 100% 



Voici une autre illustration de cette possibility de choix : ne retenir dans notre compilation de mp3 en XML que les 
informations posterieures a 1993. 

II suffit de modifier la balise <xsi:if> du fichier XSL precedent. La condition s'exprime par test="date sgt; 1993" (> 
pour le signe > superieur a). 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns : xsl="http : / /www . w3 . org/ 1 99 9/XSL/Transf orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding="3"> 

<tr style="background: #9cf ; "> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 

<xsl:if test="date Sgt; 1993"> 

<tr> 

<tdxxsl : value-of select="date" /></td> 

<td><xsl : value-of select="titre"/x/td> 

<td><xsl : value-of select = "artiste"/x/td> 

</tr> 

</xsl : if > 

</xsl : f or-each> 

</table> 

</body> 

</html> 

</xsl : tempi at e> 
</xsl : stylesheet> 



Le fichier est enregistre sous le nom xsl_ifbis avec I'extension .xsl (xsl_ifbis.xsl). 
Afin d'associer ce fichier XSL au fichier XML de depart, la balise suivante est ajoutee 



<? xml - s t y 1 e sheet type= " t ext / xs 1 " hre f = " xs l_i f bi s . xs 1 " ? > 
Soit, 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_ifbis . xsl" ?> 
<compilation> 
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<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Ce qui nous permet d'afficher uniquement les lignes du tableau pour les annees posterieures a 1993. 



0 XSL - Windows Internet Explorer 



SEE 



g(] C:\Documents and 5e vj| | *» | [X 



Live Search 



A 4i I'gxsi 



Les victoires de la musique 



Annee 


Album 


Artiste 


1994 


Rio Grande 


Eddy Mitchell 


1995 


Samedi soir sur la Terre 


Francis Cabrel 


1996 


Defoule sentimentale 


Alain Souchon 



^ Poste de travail \ 100% ' 
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Conditions et le XSL 



Le XSL permet aussi de faire un choix conditionnel par la balise <xmi : choose>. A I'interieur de cette balise, une action 
peut etre determinee lorsqu'une condition est verifiee (balise <xsi:when>) et dans le cas contraire il faut prevoir une 
autre action (balisexsi:otherwise>). 

<xsl : choose> 

Condition verifiee 

<xsl : when test="artiste=' Francis Cabrel'"> 
<tr style=" background: #9cf;"> 

<td><xsl : value-of s elect =" dat e " /></td> 

<td><xsl:value-of select = "titre"/x/td> 

<td><xsl:value-of select=" artiste "/></td> 
</tr> 

</xsl:when> 
sinon 

<xsl : otherwise> 
<tr> 

<tdxxsl : value-of select = "date"/x/td> 

<td><xsl:value-of select = "titre"/x/td> 

<tdxxsl:value-of select=" artiste "/></td> 
</tr> 

</ xsl : otherwise> 
</xsl:choose> 

Exemole 

Nous allons reprendre dans notre compilation de mp3 en XML tous les titres de Francis Cabrel que nous allons afficher 
avec un arriere-plan de couleur, les autres titre etant affiches normalement. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9 /XSL/ Trans f orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding="3"> 

<tr> 

<td>Annee</td> 
<td>Album</td> 
<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<xsl : choose> 

<xsl:when test="artiste=' Francis Cabrel' "> 
<tr style="background: #9cf ; "> 
<td><xsl : value-of select="date" /></td> 
<td><xsl : value-of select="titre"/x/td> 
<td><xsl : value-of select = "artiste"/x/td> 
</tr> 

</ xsl :when> 
<xsl : otherwise> 
<tr> 

<td><xsl : value-of select="date" /></td> 
<td><xsl : value-of select="titre"/x/td> 
<td><xsl: value-of select="artiste"/x/td> 
</tr> 
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</xsl : otherwise> 
</xsl : choose> 
</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : template> 
</xsl : stylesheet> 



Le fichier est enregistre sous le nom xsl_choose et I'extension .xsl (xsl_choose.xsl). 
Afin d'associer ce fichier XSL au fichier XML de depart, la balise suivante est ajoutee 



<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " hre f = " xs l_choo se . xs 1 " ? > 
Soit, 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_choose . xsl" ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Ce qui nous permet d'afficher uniquement les lignes concernant Francis Cabrel mises en evidence. 



0 XSL - Windows Internet Explorer 



▼ I |g?| C:\Documents and 5e | \ \ X | 



✓e Search 




Annee 


Album 


Artiste 


1990 


Sarbacane 


Francis Cabrel 


1991 


Nickel 


Alain Souchon 


1992 


Sheller en solitaire 


William Sheller 


1993 


Cache derriere 


Laurent Voulzy 


1994 


Rio Grande 


Eddy Mitchell 


1995 


Samedi soir sur la Terre 


Francis Cabrel 


1996 


Defoule sentimentale 


Alain Souchon 



j Poste de travail *^ 100% » 
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Transformation avec le XSL 



L'element <xsi:appiy-tempiates /> utilise au sein de la balise <xsi: tempiate/> permet d'appliquer un modele 
(template) de transformation ou de presentation sur les elements du document XML. 

Sur notre fichier XML, nous allons appliquer des presentations de style differentes pour les informations relatives : 

• au titre de I'album <xsl rtemplate match="titre"> ... </xsl : template>, 

• au nom de I'artiste <xsl : template match="artiste"> ... </xsl : template>, 

• et a la date <xsl : template match="date"> ... </xsl : template>. 
Les balises concernees ont ete prealablement definies par : 

<xsl : template match="mp3"> 

<p> 

<xsl : apply-templates select 
<xsl : apply-templates select 
<xsl : apply-templates select 
</p> 

</xsl:template> 
Le fichier XSL devient : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9 /XSL/ Trans f orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<h3>Les victoires de la musique</h3> 

<xsl : apply-templates/> 

</body> 

</html> 

</xsl : tempi at e> 

<xsl : template match="compilation/mp3"> 
<p> 

<xsl : apply-templates select="titre" /> 
<xsl : apply-templates select="artiste"/> 
<xsl : apply-templates select="date" /> 

</p> 

</xsl : tempi at e> 

<xsl : template match="titre"> 

Titre : <span style="font-weight :bold; "> 

<xsl : value -of select =" . " /></ span> 

<br /> 

</xsl : tempi at e> 

<xsl : template match="artiste"> 

Artiste : <span style=" font-variant : small-caps"> 
<xsl : value -of select="."/x/span> 
<br /> 

</xsl : tempi at e> 

<xsl : template match="date"> 

Date: <span style="f ont-style : italic; "> 

<xsl : value -of select =" . " /></ span> 

<br /> 

</xsl : tempi at e> 
</xsl : stylesheet> 

Le fichier est enregistre sous le nom xsl_apply et I'extension .xsl (xsl_apply.xsl). 
Afin d'associer ce fichier XSL au fichier XML de depart, la balise suivante est ajoutee : 



= " titre "/> 
=" artiste "/> 
="date"/> 
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<? xml - s t y 1 e sheet t ype= " t ext / xs 1 " hre f = " xs l_apply . xs 1 " ? > 
Ce dernier devient : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl " href ="xsl_apply . xsl " ?> 
<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis CabreK/art iste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

Etc. 



Ce qui permet d'afficher notre fichier avec une mise en forme differente pour le titre (en gras), le nom de I'artiste (petites 
majuscules) et le date (en italique). 



0 XSL - Windows Internet Explorer 






▼ ^| C:\Documents and Se v 


♦t X Live 


& & gXSL 





A 



Les victoires de la musique 

Titre : Sarbacane 
Artiste : FRANCIS CABREL 
Date: 1990 

Titre : Nickel 

Artiste : ALAIN SOUCHON 

Date: 1991 

Titre : Shelter en solitaire 

Artiste : WlLLLAM SHELLER 
Date: 1992 

Titre : Cache derriere 

Artiste : LAURENT VOULZY 
Date: 1993 



Q Pour une etude (beaucoup) plus complete du XSL, vous pouvez vous reporter a I'ouvrage XML et XSL - Les 
" feuilles de style XML de Cyril Vincent de la collection Ressources Informatiques des Editions ENI. 
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XML Notepad 2007 et le XSL 



Si vous utilisez XML Notepad 2007, lorsque vous ouvrez un fichier (File - Open), celui-ci s'affiche dans la fenetre 
correspondant a I'onglet Tree View. 



File Edit View Insert Window Help 

! J lJ id cv* ^ l& X I A 1 & m 



XSL Output 



Tree View 

£ xml 

C xml-stylesheet 
B ^ compilation 





mp3 








B 4* 


titre 


Sarbacane 




c 


artiste 


Francis Cabrel 




b £ 


date 


1990 


t- 


t3 mp3 








i 4* 


titre 


Nickel 




B ■ £ 


artiste 


Alain Souchon 




B k> 


date 


1991 


B- 


£3 rap 3 






i- 


Q mp3 






*- 


Q mp3 






s 


wp3 






S- 


Q mp3 







ver s ion= " 1 . 0 " encoding= " ISO-8859- 1 " 
type="text/xsl" href="xsl sort.xsl" 




En choisissant I'onglet XSL Output, il est possible d'adjoindre au fichier XML un fichier XSL et de visualiser la 
transformation graphique instantanement, sans avoir a utiliser un navigateur. 



O XML Notepad 




File Edit View Insert Window Help 

J _J d_ C» ^ A X II M it- 
Tree View XSL Output 



XSLT Location: 



xsl sort.xsl 



Artiste 


Titre 


Annee 


Alain Souchon 


Nickel 


1991 


Alain Souchon 


Defoule sentimentale 


1996 


Eddy Mitchell 


Rio Grande 


1994 


Francis Cabrel 


Sarbacane 


1990 


Francis Cabrel 


Samedi soir sur la Terre 


1995 


Laurent Youlzy 


Cache derriere 


1993 


William Sheller 


Sheller en solitaire 


1992 



f 
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Presentation 



Le DOM (pour Document Object Mocte/)<$SDocument Object Model;DOM, Nceud> definit un mode standardise pouracceder 
et mettre a jour tous les elements d'un document Html, Xhtml ou XML. 

II faut preciser que le DOM n'est pas en soi un langage de balise ou de programmation mais simplement une maniere de 
percevoir, de parcourir et de manipuler un document Html ou XML, en utilisant des methodes et des proprietes 
specifiques. 

Lors des balbutiements de la publication sur le Web, Netscape 2 et Internet Explorer 3 avaient deja introduit un concept 
objet dans les pages Html. Ce concept rudimentaire permettait d'acceder a certains elements du document Html, comme 
les images et les composants de formulaires. II portera, a posteriori, le nom de DOM niveau 0 (DOM level 0). Comme 
c'etait la mauvaise pratique a I'epoque, chaque editeur avait sa propre implementation des objets, ce qui laissait la porte 
ouverte a une forte incompatibility entre les differents navigateurs. 

Le consortium W3C s'empressa d'editer des 1998 une recommandation pour standardiser les objets et la fagon de les 
apprehender. Celle-ci porte le nom de DOM niveau 1 (Dom level 1). II devenait ainsi possible d'acceder a chaque element 
de la page Html, du document entier au simple contenu textuel. Mieux encore, tous les fabricants de navigateurs ont, 
petit a petit, adopte cette recommandation, avec pour consequence la disparition quasi-totale des problemes 
d'incompatibilite du DOM. 

Pour etre complet, signalons que le DOM a evolue avec la recommandation DOM niveau 2 en novembre 2000 et la 
recommandation DOM niveau 3 en janvier 2004. Les specifications de ces dernieres recommandations ne sont, a I'heure 
actuelle, que partiellement reprises par les navigateurs. 
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Concept de nceud (node) 



Selon le DOM, tout composant ou element d'un document Html, Xhtml ou XML constitue un noeud (node). 

Ces differents noeuds sont en relation les uns avec les autres. II est alors possible de representer un document selon 
une structure arborescente qui n'est pas sans rappeler celle d'un arbre genealogique avec ses branches et ses 
intersections. 

II faut bien admettre que ce terme de nceud ou node n'est pas tres elegant ni tres explicite. On aurait pu parler 
d'element mais ce terme designe egalement les balises Html et Xhtml. Le terme d'objet est, quant a lui, repris par le 
JavaScript et les autres langages de programmation. Par contre, il a neanmoins I'avantage de rappeler I'arborescence ou 
la hierarchisation d'un document. 

Tout composant etant un noeud, on peut concevoir : 

• le document entier comme un noeud, appele noeud document (document node). 

• Chaque balise ou element est un noeud element (element node). Ainsi, des balises comme <p>, <ui>, <ii> sont 
des nceuds element. 

• Le texte contenu entre les balises est un noeud texte (text node). Ainsi, pour <p>Texte du paragraphe</p>, les 
mots "Texte du paragraphe" constituent un nceud texte. 

• Chaque attribut d'une balise ou element est un noeud attribut (attribut node). Pour <img href="image .png" 
ait="" />, hrefet alt sont des noeuds attribut. 

• Les commentaires deviennent des noeuds de commentaire (comment node). 

• Etc. 
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Hierarchisation des nceuds 



Les nceuds ont une relation hierarchique entre eux. 

Soit, par exemple, <p>Texte du Paragraphe</p>. Cet exemple contient deux noeuds. Un noeud element pour la balise <p> 
et un noeud texte qui comporte les mots "Texte du paragraphe". Comme le noeud <p> contient un nceud texte, leur 
relation peut etre qualifiee de parent/enfant, la balise <p> jouant le role de parent (parent) et le texte de celui d'enfant 
(child). 



texte 



Selon ce mode hierarchique, tous les noeuds forment I'arborescence ou I'arbre du document. Cet arbre commence par le 
noeud document et se termine par les nceuds texte pour les niveaux les plus eloignes. 

Prenons a titre d'exemple, un document Html rudimentaire. 



<html> 
<head> 

<title>Le DOM</title> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 
<p>Texte du paragraphe</p> 
</body> 
</html> 



La hierarchie du document peut se representer comme suit 



document 



html 





head 










title 





1 



body 



hi 



Le DOM 



Titre de 
niveau 1 



Texte de 
paragraphe 



Document, html, head, title, Le DOM, body, hi, Titre de niveau 1, p, Texte du paragraphe sont tous des noeuds. Mais Ms 
ne sont pas tous du meme type. Document est un nceud document. Les six balises Html sont des nceuds element et les 
trois textes sont des nceuds texte. 



Tous ces nceuds sont en relation les uns avec les autres. Pour qualifier ces relations, le DOM emprunte la terminologie 
utilisee pour les arbres genealogiques. 
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Chaque noeud, excepte le noeud document, a un nceud parent. Ainsi, par exemple, le noeud parent du noeud element 
<body> est le noeud element <htmi> et le noeud parent de <hi> est le noeud element <body>. 

La plupart des nceuds element ont un ou des nceuds enfant. Ainsi, le nceud <head> possede un element enfant, le noeud 
<titie>. A son tour, le nceud <titie> comporte un element enfant, soit le nceud texte "Le DOM". 

Certains nceuds sont freres et sceurs (siblings) car ils partagent le meme parent. Ainsi, les nceuds <hi> et <p> sont freres 
et sceurs car ils sont tous deux des elements enfant du nceud element <body>. 

Des nceuds peuvent avoir des ascendants et des descendants. 

Les ascendants sont les noeuds qui sont parents d'un nceud ou parents d'un nceud parent. Dans notre exemple, tous les 
nceuds de texte ont le nceud <htmi> comme ascendant et le nceud de texte de <p> a le nceud element body comme 
ascendant. 

Les descendants sont les noeuds qui sont enfants d'un nceud ou enfants d'un noeud enfant. Dans notre exemple, tous 
les noeuds texte sont des descendants du nceud <htmi> et le nceud de texte de <p> est descendant du nceud <body>. 



- 2- 
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Proprieties de I'objet Node 



1. Les proprieties de relation 



II n'est pas etonnant de retrouver les termes de parent (parent), enfant (child) ou freres/soeurs (sibling) dans les proprietes. 



parentNode 


Renvoie le noeud parent d'un noeud. 


f irstChild 


Renvoie le premier enfant d'un noeud. 


lastChild 


Renvoie le dernier enfant d'un noeud. 


childNodes 


Stocke une liste de tous les noeuds enfant 
disponibles a partir d'un noeud. 


previousSibling 


Renvoie le noeud freres/soeurs precedent d'un 
noeud. 


nextSibling 


Renvoie le noeud freres/soeurs suivant d'un 
noeud. 



2. Les proprietes d'etat 

Ces proprietes permettent de s'informer sur I'etat d'un noeud. 

nodeName 

Indique le nom du noeud selectionne. Le nom de la balise est toujours retourne en majuscules. 

nodeType 

Indique le type de node rencontre. Ce type prend differentes valeurs : 

- 1 si le noeud est un element. 

- 2 si la selection porte sur un attribut. 

- 3 s'il s'agit du nceud de texte. 

- 4 pour un noeud de section CDATA. 

- 5 pour un noeud de reference a une entite. 

- 6 pour un noeud d'entite. 

- 7 pour un noeud destruction de traitement. 

- 8 pour un noeud de commentaire. 

- 9 pour un noeud de document. 

- 10 pour un noeud de type de document. 

- 11 pour un noeud de fragment de document. 

- 12 pour un noeud de notation. 

nodeValue 

Permet d'obtenir ou de changer la valeur d'un nceud de type texte. 
Exemples : 

Selon I'arbre du document etudie au point C. precedent : 



Pour le noeud element <head> 



nodeName 


HEAD 


nodeType 


1 


nodeValue 


null (sans objet) 


parentNode 


Le noeud element html 


childNodes 


Un enfant, le noeud element title 


f irstChild 


Le noeud element title 


lastChild 


Le noeud element title 


nextSibling 


Le noeud element body 


previousSibling 


null (sans objet) 



Pour le noeud element <body> 
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nodeName 


BODY 


nodeType 


1 


nodeValue 


null (sans objet) 


parentNode 


Le noeud element html 


childNodes 


Deux enfants, les nceuds element hi et p 


f irstChild 


Le noeud element hi 


lastChild 


Le noeud element p 


nextSibling 


null (sans objet) 


previousSibling 


Le node element head 



Pour le noeud element <hl> 


nodeName 


HI 


nodeType 


1 


nodeValue 


null (sans objet) 


parentNode 


Le noeud element body 


childNodes 


Un enfant, le noeud texte 


f irstChild 


Le noeud texte 


lastChild 


Le noeud texte 


nextSibling 


Le noeud element p 


previousSibling 


null (sans objet) 
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Firefox DOM Inspector 



Grace a ses nombreuses extensions, Firefox offre a la disposition des utilisateurs des fonctionnalites tres utiles qui ne 
cessent de ravir les developpeurs. 

Parmi ces extensions, il y en a une, assez meconnue et peu documentee, qui se revele d'une grande utilite pour 
I'apprentissage du DOM et I'exploration de I'arborescence du document. II s'agit de Firefox DOM Inspector. 

Cet outil est installe automatiquement avec Firefox, a condition que vous ayez choisi I'installation personnalisee. Si, 
comme la plupart des utilisateurs, vous avez choisi I'installation standard, la fagon la plus simple pour disposer de cet 
outil consiste a desinstaller le navigateur et a le reinstaller en choisissant la bonne option (voir captures d'ecran ci- 
apres). II n'y a aucune crainte a avoir pour votre profil, votre configuration, vos marque-pages ou autres extensions rien 
ne sera modifie. 



ft Installation de Mozilla Firefox 



Type d'installation 

Choar les options cflnstalation 

Choisir le type dlnstallabon desire et ctquer six « Suivar* ». 
O Standard 

Frefox sera installe avec les options les plus ecu-antes. 
©PerjonnalKe 

Cholsr les options a installer. Recommande pour les utllsateurs averts. 



3 



( < Preceden t | | Suivant > [ Anniter ~ 



ft Installation de Mozilla Firefox 



Choix des composantt optionnelt 

Chosissez les f onctonnaltes de Moalla Firefox que vous voutez 
instaler. 



Composants opbonnek : 

0 Inspecteur DOM 

Analyse la structure et les proprietes d'une fenetre et de son contenu. 

A yi I dr rrl.ci.r qu jilr 

Envole des informations sur les plantages du programme a r-toalla, 



| < Precedent || Suivant > | j Annuler 



Une fois la page affichee, pour demarrer DOM Inspector, on peut utiliser le raccourci-clavier [Ctrl] [Maj] i ou passer 
par le menu Outils - DOM Inspector. 
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E Impecteur DOM 



Renter Edition Recherche r 


AffKher I 
















Examiner 












fiH w Document - DOM todes 


► -\ 


Ob)et - Javascnpt Ob>»ct 




► » 


nodeMame id 


class PI 


Propr*£te 


VateLr 


n 






-I Sujet 


P. I .'m 1 HTM Rm ■..Fr-riip-* /l 




8 HTML 




nodeName 


"BCDY" 




E HEAD 




nodeVakie 






META 




nodeType 


1 




B«U 




-» p-f r?l I'V.'jd- 


fVihiiij-f HTM Hr^lPl^i>^->tl 
LCDjlrCC nil LMJl 1^1^ ilrl 




♦ STYLE 






[ob|ect NodeUst) 




It SCRIPT 




51 ftrstChld 


[obiect HTriSpanEtement] 




BSOOY 


ffltetCNkl 


[ob|ect HTf-lSpanEtement] 




8 CENTER 




&) prevlousSlblng 


[obiect HTMHeadEIement] 




1- FORM 




nextsblng 


(nul) 




* ... frame 




B attrbutes 


[obiect MamsdNodeMap] 








B owneiDocument 


[obgect HIMDocument] 





Une fois DOM Inspector ouvert, I'arborescence du document se trouve a gauche. Chaque ligne represente un nceud. On 
peut naviguer dans I'arbre du DOM en cliquant les petites icones + ou - pour deployer ou refermer I'arborescence de 
chaque nceud. Dans la partie de droite, avec I'option Javascript Object du menu deroulant, s'affichent toutes les 
proprietes de nodeName a previousSibling (et plus encore...) du noeud selectionne dans la partie gauche. 

Reprenons le fichier Html du point Hierarchisation des noeuds de ce chapitre. 

<html> 
<head> 

<title>Le DOM</title> 

</head> 

<body > 

<hl>Titre de niveau K/hl> 
<p>Texte du paragraphe</p> 
</body> 
</html> 

Celui-ci s'affiche dans DOM Inspector comme suit : 



nodeName 


^ A 


B ^document 


B HTML 




0 HEAD 




B TITLE 




#text 




B BODY 




- HI 




#text 






i 


- P 




#text 










i 



Pour des documents plus consequents, on peut aussi utiliser la fonction de recherche par id, balise ou attribut en 
passant par menu Rechercher - Rechercher un nceud et [F3] pour trouver le nceud suivant. 
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f — 

Rechercher des nceuds X 










Balise 


hi 


-i r 1 

1 Rechercher 








Annuler 




Chercher par 






Old 








0 Balise 






O Attribut 








■ 





Dans la fenetre de gauche, vous pouvez choisir d'afficher differents types d'informations : 

• DOM Nodes est la vue par defaut, el le affiche la structure de la page. 

• Box Model permet de connaitre la position, les dimensions, les marges, la bordure ou le remplissage d'une boite. 

• XBL Bindings est destine aux developpeurs qui utilisent le XUL (XML-based User interface Language). 

• CSS Style Rules montre toutes les regies CSS appliquees au nceud selectionne. 

• Computed Style indique toutes les regies appliquees au noeud selectionne, quelle que soit leur origine 
(declaration explicite, script ou heritage). 

• JavaScript Object montre tous les objets JavaScript utilises. 



Ba , Objet - Javascript Object ' 


DOM Node 




Box Model 




XBL Bindings 




CSS Style Rules 


j 


Computed Style 




Javascript Object 







Ainsi, DOM Inspector est bien plus qu'un outil pour explorer I'arborescence des nceuds. II permet, par exemple, de 
debuguer et modifier en direct un document mais toutes ses fonctions depassent le cadre de cet ouvrage. 
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Particularity de Firefox 



Une utilisation plus intensive de DOM Inspector fait apparaitre une interpretation particuliere de I'arborescence du DOM 
de la part de Firefox. En effet, Firefox et les autres navigateurs de la famille Mozilla considerent les sauts de ligne du 
code comme des nceuds de texte vides, chose que ne fait pas Microsoft Internet Explorer. 

Notre document Html du point Hierarchisation des noeuds de ce chapitre est interprets comme tel par Internet Explorer. 
Soit, 



<html> 
<head> 

<title>Le DOM</title> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 
<p>Texte du paragraphe</p> 
</body> 
</html> 



Par contre Firefox I'interpretera ainsi : 

<htmi>noeud de texte 

<head>noeud de texte 

<titie>Le DOM</titie>nce ud de texte 

</head>nceud de texte 

<body>noeud de texte 

<hl>Titre de niveau K/hl>n02 ud de texte 
<p>Texte du paragraphe</p>nce ud de texte 
</body>nceud de texte 

</html> 

Le nombre d'enfants d'un element est done different selon que le document est affiche par Internet Explorer ou Firefox. 
Ce que confirme I'experience suivante. 

Ainsi le meme code alert (x.chiidnodes . length) revele un resultat different pour un document identique : 
Dans Internet Explorer : 



Windows Internet Explorer 




Dans Firefox 



[Application JavaScript] 



Nombre d'enfants = 9 



t~5~l 



Cette difference d'interpretation du DOM peut entrainer des variations notables entre les deux navigateurs. Les 
developpeurs s'en accommodent en limitant I'acces par les proprietes de I'objet noeud, a des elements proches d'un 
objet determine. C'est ce que nous allons faire plus loin dans notre etude d'AJAX aux chapitres L'approche AJAX et AJAX 
par I'exemple. 
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Acceder aux noeuds 



1. Par la procedure classique 



C'est la methode que nous avons etudiee et utilisee dans le chapitre partie Le JavaScript de cet ouvrage. El le consiste 
a definir le chemin, d'objet en objet, vers I'objet concerne. 

Cette methode ne met pas encore en ceuvre les specifications du DOM et a ete appelee a posteriori DOM niveau 0. El le 
est encore tout a fait valable et reconnue par les differents navigateurs du marche, et meme si son implementation 
n'est pas toute recente el le est assez pratique dans le cas de formulaires par exemple. 

Exemole 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script t ype=" text/ JavaScript "> 

//< ! [CDATA [ 

function test ( ) ( 

var nom = document . form . votrenom . value; 

var prenom = document . form. votreprenom. value; 

var age = document . form. votreage . value; 

alert (nom + " " + prenom + "\n" + age + " ans") ; 

} 

//]]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

Nom : <input type="text" name=" votrenom" value="Nom" /><br /> 

Prenom : <input type="text" name="votreprenom" value="Prenom" /><br /> 

Age : <input type="text" name="votreage" value="Age" /> 

<pxinput type=" submit " value="Entrer " onclick="test ( ) " /></p> 

</f orm> 

</body> 

</html> 



Nom : 



Nom 



Prenom : 



Prenom 



Age : [Age 



Entrer 



^ Poste de travail 



r 

f ' DOM - Windows Internet Explorer 




▼ H$ file:///C:/Documents°/ V 


H 


X] Live 


A & ^DOM 









Windows Internet Explorer 



j\ Norm Prenom 
» \ Age ans 



OK 



+ x 100% * 
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2. Par la methode getElementByld 



La methode JavaScript getElementByld parcourt le document Html ou Xhtml a la recherche d'un nceud unique qui a ete 
specifie par I'attribut id. Cet identifiant id doit etre unique dans le document. 

Le terme Element de getElementBylD est bien au singulier car il ne peut y avoir qu'un seul identifiant portant ce nom. 
Exemple 

Au die sur un titre de niveau 1, retourner dans une boite d'alerte le nom du noeud (nodeName). 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / javascript "> 

// <! [ CDATA [ 

function valeur() { 

var x = document . getElementByld ( "titre" ). nodeName; 

alert (x) ; 

} 

// ]]> 
</script> 
</head> 
<body> 

<hl id="titre" onclick="valeur ( ) ">Titre de niveau K/hl> 

<p>Cliquez sur le titre</p> 

</body> 

</html> 



r 

C DOM - Windows Internet Explorer _ 




-yCp !@ C:\Documents and Se v +f 












Titre de niveau 1 





CKquez sur le titre 



Windows Internet Explorer 

fx 



OK 



j Poste de travail + % 100% » 



La methode getElementByld, appliquee au document, accede a I'identifiant signale en argument ("titre") et la propriete 
de noeud nodeName lui est appliquee. Cette valeur, stockee dans la variable x, est affichee dans la boite d'alerte. 



C\ Cette methode getElementByld n'est que rarement utilisee dans un document XML car el le recherche les 
attributs de type id qui doivent alors etre definis dans un DTD (Document Type Definition) particulier. 



3. Par la methode getElementsByName 
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La methode getEiementsByName permet de selectionner les elements portant un nom donne, specifie par I'attribut 
name. Les elements portant le meme nom sont stockes dans une liste de noeuds. Cette liste se gere comme un 
tableau Array. 

Le terme Elements de getEiementsByName est bien au pluriel car plusieurs elements portant le meme nom peuvent se 
trouver dans le document. 

Exemole 

Accedons a la valeur de la troisieme ligne de texte par la methode getEiementsByName. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CDATA [ 

function test ( ) { 

var age = document . getEiementsByName ( "in" ) [2] .value; 

alert (age + " ans"); 

} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

Nom : <input type="text" name="in" value="Nom" /><br /> 

Prenom : <input type="text" name="in" value="Prenom" /><br /> 

Age : <input type="text" name="in" value="Age" /> 

<pxinput type=" submit " value="Entrer " onclick="test ( ) " /></p> 

</f orm> 

</body> 

</html> 



La methode getEiementsByName, appliquee au document, accede a la troisieme balise ayant I'attribut name="in" par 
getEiementsByName ("in") [2] . Sa valeur est recuperee par value. Cette valeur, stockee dans la variable age, est affichee 
dans la boite d'alerte. 



Windows Internet Explorer f^~|fn"| X 



* I r & filei/Z/O/Documents'/ V J *f\ | X | 



Nom : 


Nom 




Prenom : 


Prenom 


Age : 


Age 





Entrer 



Windows Internet Explorer 



□ 



Age ans 



OK 



v 

Poste de travail + v 100% " 



C\ L'attribut name est un heritage du Html 4.0. Son emploi est deprecie (deprecated) en Xhtml au profit de 
^ I'identifiant id. Ainsi I'emploi de getEiementsByName est de moins en moins frequent. II est meme ignore dans 
certaines parutions recentes. 
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4. Par la methode getElementsByTagName 



La methode getElementsByTagName parcourt le document a la recherche de toutes les balises d'un type specifique, 
signale en argument. Ces balises sont contenues dans une liste (nodeList) qui se gere comme les tableaux de type 
Array. 

Le terme Elements de getEiementsByName est bien au pluriel car il ne peut y avoir plusieurs balises de meme type dans 
le document. 

Exemole 

Accedons a la valeur de la 3eme ligne de texte par getElementsByTagName. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / JavaScript "> 

//<! [CD ATA [ 

function test ( ) ( 

var age = document . getElementsByTagName ( "input" ) [2] .value; 

alert (age + " ans"); 

} 

//] ]> 
</script> 
</head> 
<body> 

<form name="form" action=""> 

Norn : <input type="text" value="Nom" /><br /> 
Prenom : <input type="text" value="Prenom" /><br /> 
Age : <input type="text" value="Age" /> 

<pxinput type=" submit " value="Entrer " onclick="test ( ) " /></p> 

</f orm> 

</body> 

</html> 



La methode getElementsByTagName, appliquee au document, accede a la troisieme balise <input/> par 
getElementsByTagName ("input") [2]. Sa valeur est recuperee par value. Cette valeur, stockee dans la variable age, est 
affichee dans la boite d'alerte. 

La capture est identique a celle du point precedent. 



^ Cette methode, getElementsByTagName, est tres frequemment utilisee dans les documents XML. 



5. Par les proprieties des noeuds 

II est theoriquement possible d'acceder a n'importe quel element par un code du genre : 

x .parentNode . lastChild. chil dNode s[2] . firstChild.nextSibling; 

Cette fagon de proceder ne se revele cependant pas tres pratique a I'usage car : 

• Le code devient rapidement illisible. 

• Une simple mise a jour de la page risque de modifier completement I'arborescence du document et 
necessiterait alors la reecriture complete du code. 

• Les navigateurs n'ont pas la meme interpretation du DOM, specialement en ce qui concerne les sauts de ligne 
dans le code que Firefox considere comme des elements texte vide et que Explorer ignore (voir ci-avant au 
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point Particularity de Firefox). 



Ainsi, les developpeurs Utilisent les methodes getElementByld, getElementsByName OU getElementsByTagName pour Se 

rapprocher de I'element et, a partir de la , utilisent les proprietes firstChild, parentNode ou autres proprietes similaires 
pour acceder a I'element souhaite. 

Mettons en pratique la procedure determinee soit un saut de longue distance et ensuite une exploration limitee. 
Exemple 1 

Soit le code suivant : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

</head> 

<body> 

<hl id="titre">Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<div>Texte quelconque</div> 
<f orm> 

La reponse : <br /> 

<input id="texte" type="text" /> 

</f orm> 

</body> 

</html> 



£ DOM - Windows Internet Explorer Q@CK 



▼ 1 0 C;\Documents and 5e v 1 1 *t /s 



jgDOM 



Titre de niveau 1 



Paragraphe 1 
Texte quelconque 
La reponse : 



^ Poste de travail 



\ 100% 



L'arborescence se presente comme suit 



hi 



body 



Titre de niveau 1 



F 




div 






Paragraphe 1 

j 


■ < 
Texte quelconque 
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• Au die sur le document, affichons dans une ligne de texte, le texte compris entre les balises <hi> 



</hl> . 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / javascript "> 

// <! [ CDATA [ 

function valeur() { 

var y=document . getElementBy Id ( "texte " ) ; 

var x=document . getElementByld ( " t itre " ) .firstChild; 

y . value=x . nodeValue ; 

} 

// ]]> 

</script> 

</head> 

<body onclick=" valeur ( ) "> 

<hl id="titre">Titre de niveau K/hl> 

<p>Paragraphe K/p> 

<div>Texte quelconque</div> 

<f orm> 

La reponse : <br /> 

<input id="texte" type="text" /> 

</f orm> 

</body> 

</html> 
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L 'element <hi> est obtenu par la methode getElementByld ("titre" ) . A partir de la, le noeud texte est obtenu par la 
propriete firstChid. II suffit alors d'afficher la valeur par la propriete nodeValue. 



• Au die sur le document, afficher dans la ligne de texte, le texte compris entre les balises <div> . . . </div>. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script t ype=" text/ javascript "> 

// <! [ CDATA [ 
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function valeur() { 

var y = document . getElementBy Id ( "texte ") ; 

var x = document . getElementBy Id ( "tit re ")■ parentNode . childNodes [ 2 ]. fir stChild; 

y . value=x . nodeValue ; 

} 

// ]]> 

</script> 

</head> 

<body onclick=" valeur ( ) "> 

<hl id="titre">Titre de niveau K/hl> 

<p>Paragraphe K/p> 

<div>Texte quelconque</div> 

<f orm> 

La reponse : <br /> 

<input id="texte" type="text" /> 

</f orm> 

</body> 

</html> 
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La methode getEiementByidC'titre") accede a la balise <hi>. A partir de la, le noeud parent est obtenu par la 
propriete parentNodes, soit la balise <body>. On redescend alors vers I'element enfant <div> par childNodes [2] . II faut 
encore descendre d'un niveau pour atteindre le texte en utilisant firstChild. Le texte est affiche par la propriete 
nodeValue. 

Notons que notre code n'est pas compatible avec Firefox, a cause des passages a la ligne qui sont alors consideres 
comme des elements enfant (elements de texte vide). 

Exemple 2 

Soit a present un tableau d'une ligne et trois colonnes : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

</head> 

<body> 

<table border="l" bordercolor="black" cellpadding=3" 

style="border-collapse : collapse; "> 

<tr> 

<td>Cellule K/td> 

<td id="di">Cellule 2</td> 

<td>Cellule 3</td> 

</tr> 

</table> 
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L'arborescence se presente comme suit 



Cellule 1 



Cellule 2 



Cellule 3 
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table 






tr 










td 






Cellule 2 



■ 



td 



Cellule 3 



Au die sur un bouton, afficher dans une balise <div> . . . </div>, le texte contenu dans la premiere colonne du 
tableau, sachant que I'identifiant est place au niveau de la seconde balise <td>, done sur la deuxieme colonne. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta<+>http-equiv="Content-Type" content=" text /html " /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / javascript "> 

//<! [CD ATA [ 

function valeur() { 

var y = document . getElementBy Id ( "texte ") ; 

var x = document . getElementBy Id ( "di "). previousSibling . firstChild; 

y.innerHTML =x . nodeValue ; 

} 

//] ]> 
</script> 
</head> 
<body> 

<table border="l" bordercolor="black" cellpadding=3" 

style="border-collapse : collapse; "> 

<tr> 

<td>Cellule K/td> 

<td id="di">Cellule 2</td> 

<td>Cellule 3</td> 

</tr> 
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</table> 

<form action=""> 

<input type="button" value="Tester " onclick="valeur ( ) " /> 
</f orm> 

La reponse est : 

<span id="texte"x/span> 

</body> 

</html> 
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La balise <td> de seconde colonne est obtenue par getEiementByid("di") . Puis le premier <td> du tableau est accede 
par la propriete previousSibling Le texte est atteint par firstChild. Celui-ci est alors affiche grace a la propriete 
nodeValue. 

L'ecriture suivante est egalement valable : 

document . ge t E 1 ement By I d ( "di" ) .parentNode . firstChild. firstChild; 

ou bien 

document . getElementByld ( "di " ) . parentNode . chil dNode s [ 0 ] .firstChild; 



C\ Pour modifier le contenu de la balise <span> . . . </span>, nous avons utilise la propriete innerHtml. Cette 
propriete innerHtml a ete introduite par Internet Explorer et est done proprietaire. El le a ete depuis reprise par 
les principaux navigateurs, dont Firefox, mais son implementation peut dans certaines situations, donner des 
resultats differents. 



C\ La propriete innerHtml n'est pas un standard du W3C mais el le est tellement commode pour changer le contenu 
v d'une balise <div> ou <span> que les developpeurs I'ont largement adoptee. 



• Au die sur un bouton, afficher dans une balise <div> . . . </div>, le texte contenu dans la derniere colonne du 
tableau. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type="text / javascript "> 

// <! [ CDATA [ 

function valeur() { 

var y=document . getElementByld ( "texte " ) ; 

var x=document . getElementByld ( "di " ) . nextSibling . firstChild; 
y.innerHTML = x. nodeValue; 
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// ]]> 

</script> 

</head> 

<body> 

<table border="l" bordercolor="black" cellpadding=3" 

style="border-collapse : collapse; "> 

<tr> 

<td>Cellule K/td> 

<td id="di">Cellule 2</td> 

<td>Cellule 3</td> 

</tr> 

</table> 

<form action=""> 

<input type="button" value="Tester " onclick="valeur ( ) " /> 
</f orm> 

La reponse est : 

<span id="texte"x/span> 

</body> 

</html> 
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La balise <td> de seconde colonne est obtenue par getEiementByid("di") . Puis le premier <td> du tableau est accede 
par la propriete nextSibling . Le texte est atteint par firstChild. Celui-ci est alors affiche grace a la propriete nodeValue. 

L'ecriture suivante st egalement valable : 



document . ge t E 1 ement By I d ( "di" ) .parentNode . lastChild. firstChild; 

ou bien 



document . ge t E 1 ement By I d("di") . parentNode. chil dNode s[2] .firstChild; 
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Acceder aux attributs 



Les attributs sont des proprietes de I'element, et non pas des enfants de celui-ci. Ainsi, nous avons besoin de faire appel 
a des prescriptions du DOM niveau 2. 

La propriete attributes renvoie une liste des attributs d'un element specifie. Cette liste de noeuds attributs est renvoyee 
sous forme d'un objet de type NamedNodeMap. Ce qui implique que les attributs seront accessibles par leur nom. 

Soit, 

var paragraphe = document. getEl ement sBy TagName ( " p " ) [ 0 ] ; 
var attributs = paragraphe . attributes ; 

La variable paragraphe recupere le premier paragraphe du document. La propriete attributes appliquee a cette variable 
liste I'ensemble des attributs de celui-ci. 

La methode getNameditemO retrouve un noeud selon le nom specifie en argument. 
Soit : 

var paragraphe = document. getEl ement sBy TagName ( " p " ) [ 0 ] ; 

var attributs = paragraphe . attributes ; 

var language= attributs . getNamedltem ( "lang" ) ; 

La variable language contient I'attribut lang du premier paragraphe du document. 
Exemple 

Retrouvons la langue des differents titres : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 

<script type="text/ javascript"> 

// <! [CDATA [ 

function trouver () 

{var selection = document . getElementByld ( "liste" ) . selectedlndex; 
var paragraphe = document . getElementsByTagName ( "h2 " ) [selection]; 
var attributs = paragraphe . attributes; 

var language= attributs . getNamedltem ( "lang" ) .nodeValue; 

alert (language) ; 

} 

// ]]> 
</ script> 
</head> 
<body> 

<h2 lang=" f r " >Bienvenue ! </h2> 
<h2 lang="en">Welcome ! </h2> 
<h2 lang="de">Willkommen ! </h2> 
<h2 lang="it">Benvenuto ! </h2> 
<form action=""> 
<select id="liste"> 
<option>Titre K/option> 
<option>Titre 2</option> 
<option>Titre 3</option> 
<option>Titre 4</option> 
</ select> 

<input type="button" onclick="trouver (liste) " value="Trouver la 

langue" /> 

</ f orm> 

</body> 

</html> 



La variable selection contient I'index selectionne (selectedlndex) de la liste deroulante. Par getElementsByTagName 
("h2") [selection], on accede au paragraphe concerne. La liste des attributs (paragraphe. attributes) est creee. Enfin 
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la variable language nous fournit la valeur (nodevaiue) de I'attribut lang par le code attributs . getNameditem ( "lang" ) . 
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Les attributs en XML peuvent contenir des donnees. II est ainsi tres utile de pouvoir y acceder dans les applications 
AJAX. 
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Modifier la hierarchisation 



Le W3C DOM vous permet de creer vos propres noeuds element ou noeuds texte et de les inserer dans le document, 
modifiant ainsi la hierarchie de celui-ci. 



1. La methode createElement 

La methode createElement permet, comme son nom le suggere, de creer un nouvel element. 
Exemple 

var x = document. createElement ("hi"); 
var x = document . createElement ( "div" ) ; 

II faut noter que I'element ainsi cree n'apparait pas encore dans le document. II faut utiliser les methodes appendchiid 

ou insertBefore pour I'ajouter a celui-ci. 



2. La methode createTextNode 

La methode createTextNode cree un nceud texte dans le document. 
Exemple 

var x = document. createElement ("hi"), • 

var y = document. createTextNode ("Titre de niveau 1"); 

II faut noter que le noeud ainsi cree n'apparait pas encore dans le document. II faut utiliser les methodes appendchiid 

ou insertBefore pour I'ajouter a celui-ci. 



3. La methode appendChild 

La methode appendchiid ajoute un element comme dernier nceud enfant d'un nceud specifie en argument. 

La methode appendchiid s'applique done toujours a un nceud parent. 

Exemple 

var x = do cume n t . ge t E lement s By TagName ( ' p ' ) [ 0 ] ; 
x . par ent Node . appe ndChi 1 d ( x ) ; 

Prenons une application complete pour illustrer de fagon detaillee, le fonctionnement de la methode appendchiid. 
Soit un fichier Xhtml : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 



L'arbre des nceuds, limite a la balise body et ses descendants, est le suivant ; 
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body 



hi 



Titre de niveau 1 



Paragraphe 1 



Paragraphe 2 



Au die de la souris dans la fenetre du document, appliquons la methode appendchiid a la balise <hi>. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> . 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CD ATA [ 

function actualiser ( ) ( 

var x = document . getElementsByTagName (' hi ' ) [0]; 

x . parentNode . appendChild (x) ; 

} 

//] ]> 

</script> 

</head> 

<body onclick=actualiser ( ) > 
<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 
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La balise <hi> est obtenue par getEiementsByTagName ('hi' ) [0] , puis la balise parent <body> est atteinte par la 
methode parentNode. Enfin, la balise <hi> est placee comme dernier enfant par appendchiid, ainsi <hi> se retrouve en 
derniere position. 

L'arbre du document a done ete modifie : 



body 



Paragraphe 1 



Paragraphe 2 



Titre de niveau 1 



Ou encore, a partir du fichier Xhtml initial, ajoutons au document un element cree par createElement. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CD ATA [ 

function actualiser ( ) ( 

var x = document . createElement ( "p" ) ; 

var texte = document . createTextNode ( "Je suis le petit nouveau"); 
y = x . appendChild (texte) ; : 
document . body . appendChild (x) ; 
} 

//] ]> 
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</script> 
</head> 

<body onclick=actualiser ( ) > 
<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 



Par la variable x, la methode createEiement ("p") cree un nouveau paragraphe. Un nouveau texte est defini par 
createTextNode ( " Je suis le petit nouveau")- Le texte est associe a la balise par x . appendChild (texte) . Le nouvel 
element dans sa totalite est insere dans le document comme dernier enfant de la balise parent <body> par la propriete 
appendChild. 
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4. La methode insertBefore 

La methode insertBefore permet d'inserer un noeud avant un autre noeud. 

Cette methode est utilisee lorsque Ton souhaite ajouter un element sans qu'il devienne le dernier element enfant (voir 

appendChild). 

Exemole 

x . parentNode . insertBefore (x, y) ; 

Ainsi, en reprenant le document Xhtml du point precedent, inserons la balise <hl> apres la premiere balise de 
paragraphe (<p>). 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 
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<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//< ! [CDATA [ 

function actualiser ( ) { 

var x = document . getElementsByTagName (' p' ) [0]; 
var y = document . getElementsByTagName (' hi ' ) [0]; 
x . parentNode . insertBef ore (x, y ) ; 

} 

//] ]> 

</script> 

</head> 

<body onclick=actualiser ( ) > 
<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 
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La variable x repere par getElementsByTagName Cp' ) [0] le premier paragraphe <p>. La variable y designe avec 

getElementsByTagName (' hi' ) [0] la balise <hl>. Ensuite I'ordre des enfantS de la balise <body> (parentNode) est 
interverti par insertBef ore (x, y) . 

L'arbre modifie se presente comme suit : 



body 



hi 



Paragraphe 1 



Titre de niveau 1 



Paragraphe 2 
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5. La methode replaceChild 

La methode replaceChild remplace un noeud par un autre noeud. 

Le noeud ainsi remplace, est supprime ainsi que tous ses descendants. 

Exemple 

x . parentNode . replaceChild (x, y) ; 



Remplagons le deuxieme paragraphe de notre document Xhtml par I'element <hi; 
Le code devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CD ATA [ 

function actualiser ( ) ( 

var x = document . getElementsByTagName (' hi ' ) [0]; 
var y = document . getElementsByTagName (' p' ) [1]; 
x .parentNode . replaceChild (x, y) ; 
} 

//] ]> 

</script> 

</head> 

<body onclick=actualiser ( ) > 
<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 
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La balise <hi> est selectionnee par getElementsByTagName c hi' ) [0] et le second paragraphe <p> par 
getElementsByTagName Cp' ) [i] . Par la propriete replaceChild, on remplace le second element par le premier. 
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II faut noter que I'element <hi> a change de position et que le second paragraphe <p> a disparu du document. Le node 
texte de <hi> a suivi le changement de position. 

L'arbre modifie devient : 



body 



hi 



Paragraphe 1 



Titre de niveau 1 



6. La methode removeChild 

La methode removeChild supprime le noaud (et eventuellement ses descendants) fourni en argument. 



var x = do cumen t . ge t E lement s By T agName ( ' p ' ) [ 0 ] ; 
x . par ent Node . removeChi 1 d ( x ) ; 

Supprimons le premier paragraphe <p> du document. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 
<html> 
<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CD ATA [ 

function actualiser ( ) ( 

var x = document . getElementsByTagName (' p' ) [0]; 

x . parentNode . removeChild (x) ; 

} 

//}]> 

</script> 

</head> 

<body onclick=actualiser ( ) > 
<hl>Titre de niveau K/hl> 
<p>Paragraphe K/p> 
<p>Paragraphe 2</p> 
</body> 
</html> 
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Apres avoir repere I'element a supprimer, soit getEiementsByiagName Cp') [0], il est supprime de la balise <t>ody> par 

la propriete removeChild. 

L'arbre du document se presente comme suit : 



body 



hi 



Titre de niveau 1 



Paragraphe 2 



7. Une application recapitulative 

Ce script permet d'ajouter, de supprimer, d'inserer et de remplacer des paragraphes de texte (voir les quatre boutons 
radio pour les quatre actions possibles). Le paragraphe a inserer dans la page provient d'une zone de texte. Si Taction 
necessite de connaitre un numero de paragraphe celui-ci sera fourni par un menu deroulant, actualise a chaque action 
anterieure. 



- 8- 



© ENI Editions - All rigths reserved 



0 DOM 3 - Windows Internet Explorer 



W^jxy/ w | & C:\Documents and 5e v | *t X 



Search 



& & g*DOM3 



OAjouter O Supprimer O Inserer avant QRemplacer 



Quel paragraphe 



? - v 



Tester 



-J Poste de travail 



\ 100% ' 



Le code du fichier Xhtml initial est : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<form action=""> 
<P> 

<textarea id=" zonetexte" rows="3 
</p> 
<p> 

<input type="radio" 
<input type="radio" 
<input type="radio" 
<input type="radio" 
</p> 
<P> 

Quel paragraphe ? : 
<input type=" submit 
</f orm> 

<div id="modif iable"> </div> 
</body> 
</html> 



name="bouton 
name 
name 
name="bouton 



="bouton" 
="bouton" 



cols="30"x/textarea> 



/>Ajouter 
/>Supprimer 
/>Inserer avant 
/ >Remplacer 



<select id="liste"x/select>  
value=" Tester " /></p> 



Commengons le script par la fonction ajouterQ 



function ajouter() { 

var contenu = document . getElementByld (" zonetexte "). value; 

var newparag = document . createElement ( "p" ) ; 

var newtexte = document . createTextNode (contenu) ; 

newparag . appendChild (newtexte) ; 

changement . appendChild (newparag) ; 

document . getElementByld ( "zonetexte " ) . value=" " ; 

} 



La zone de texte est atteinte par la methode getEiementByiD prenant en parametre son identifiant (zonetexte). La 
propriete value nous fournit sa valeur. Cette valeur est stockee dans la variable contenu. La variable newparag cree par 
la methode createElement un nouveau noeud element (ici un paragraphe p). La variable newtexte cree par 
createTextNode, un nouvel element texte dont le contenu est fourni par la variable contenu. Le noeud texte est associe 
au nouveau noeud element par newparag. appendChild (newtexte) . Le tout est inclus en derniere position dans le 
document changement. appendChild (newparag) ou changement a ete defini par ailleurs comme la zone de la balise <div 
id="modif iabie"> . . . </div>. La derniere ligne reinitialise la zone de texte. 
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Le script doit par ailleurs declencher cette fonction ajouterQ lorsque le bouton radio Ajouter est selectionne. II doit 
aussi modifier dynamiquement les options du menu deroulant <seiect>, lorsque le paragraphe est effectivement ajoute 
au document. Ce que fait la fonction changer(). 



function changer () { 
var typeaction = -1; 

var nombreparag = changement . getElementsByTagName ( "p" ). length; 
var boutonradio = document . getElementsByTagName ( "form" ) [0]. bouton; 
for (var i=0; i<boutonradio . length; i++) { 
if (boutonradio [i] . checked) { 
typeaction = i; 



if (typeaction==-l ) { 

alert ("Pas de bouton radio selectionne"); 
} 

if (typeaction==0 ) { 

ajouter ( ) ; 

} 

document . getElementBy Id (" liste "). opt ions . length = 0; 

for (i=0; i<changement . getElementsByTagName ( "p" ) .length; i++) 

document . getElementBy Id (" liste" ). opt ions [ i ] = new Option (i+1), 

} 

return false; 
} 



La variable typeaction est initialised a -1 (var typeaction = -i). Le nombre de paragraphes (var nombreparag) est 

donne par la longueur (length) du tableau renvoye par getElementsByTagName ("p") . 

Le nombre de boutons radio est donne par le nombre de boutons (bouton) presents dans le formulaire 

(getElementsByTagName ("form") [0]). Une boucle for passe ces boutons en revue pour trouver I'element selectionne 
(checked). Le numero d'ordre du bouton (boutonradio [i] ) est le numero du type d'action (typeaction = i). 

Si aucun bouton n'a ete selectionne par I'utilisateur, la variable typeaction a toujours garde sa valeur initiale. Un test 
sur cette valeur initiale (if (typeaction==-i) ) permet de declencher une boite d'alerte. 

Ici, le premier bouton etant selectionne, le type d'action prend la valeur 0. Ainsi au moyen d'un simple test conditionnel 

(if (typeaction==o> ), la fonction ajouterQ peut etre appelee. 

Le nombre d'options (options . length) du menu deroulant (liste) est reinitialise a 0. Une boucle for com pte tous les 
paragraphes (getEiementsByTag-Name ("p") ) de la zone <div id="modif iabie" > (changement). A chaque passage de la 
boucle, la liste des options est alimentee (getEiementByid("iiste") .options [i]) par le nombre en cours plus 1 de la 

bOUCle (new Opt ion ( i + 1 ) ). 
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Pour la fonction supprimer() 



function supprimer() { 

var choixout = document . getElementByld ( "liste" ). selectedlndex; 

var tous = changement . getElementsByTagName ( "p" ) ; 

var asupprimer = tous [ choixout ] ; 

changement . removeChild (asupprimer) ; 

} 



La variable choixout memorise I'option retenue par I'utilisateur dans le menu deroulant (getElementByld 
("liste") -selectedlndex). La variable choixout note ainsi le numero d'ordre du paragraphe que Ton souhaite 
supprimer. La variable tous renvoie tous les paragraphes (getElementsByTagName ("p") ) sous forme d'un tableau. 
L 'element a supprimer (var asupprimer) est determine en appliquant la variable choixout au tableau (tous [choixout] ). 
La suppression est obtenu par la methode removeChild (asupprimer) appliquee a la zone de la balise <div>. 

II ne faut pas oublier d'ajouter a la fonction changerQ : 

if ( t y pe a c t i on = = 1 && nombreparag > 0) { 

s upprime r ( ) ; 

} 



La fonction supprimer n'a de sens que s'il y a des paragraphes dans la zone <div> (nombreparag > 0) . 
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Passons maintenant a la fonction insererQ 



function inserer () { 

var choixins = document . getElementBy Id ( "liste" ). selectedlndex; 

var intexte = document . getElementByld (" zonetexte" ) .value; 

var newparag = document . createElement ( "p" ) ; 

var newtexte = document . createTextNode (intexte) ; 

newparag . appendChild (newtexte) ; 

var tous = changement . getElementsByTagName ( "p" ) ; 

var oldparag = tous [choixins] ; 

changement . insertBef ore (newparag, oldparag) ; 

document . getElementByld ( "zonetexte " ) . value=" " ; 

} 



Le choix de I'utilisateur (getElementByld ( "liste" ) .selectedlndex) est stocke dans la variable choixins. La variable 
intexte recupere le contenu (value) de la zone de texte (getEiementByid("zonetexte")). Un nouveau paragraghe 
(newparag) est cree par la methode createElement ("p") . Un nouveau noeud de texte est cree par la methode 
createTextNode (intexte) . Le nceud de texte est associe a I'element (newparag. appendChild (newtexte) ). La variable 
tous liste les paragraphes de la zone modifiable (getElementsByTagName ("p") ). Puis le paragraphe signale par 
I'utilisateur (var oldparag = tous [choixins] est identifie. Le nouveau paragraphe (newparag) est insere avant celui-ci 
(oldparag) par la methode insertBef ore (newparag, oldparag). Enfin, la zone de texte est reinitialisee. 

II faut encore ajouter a la fonction changerQ : 



if ( t ype a c t i on==2 && nombreparag > 0) { 

i n s e r e r ( ) ; 

} 
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Voici la fonction remplacer () . 



function remplacer () { 

var inchoix = document . getElementByld ( "liste" ) . selectedlndex; 

var intexte = document . getElementByld (" zonetexte "). value; 

var newparag = document . createElement ( "p" ) ; 

var newtexte = document . createTextNode (intexte) ; 

newparag . appendChild (newtexte) ; 

var tous = changement . getElementsByTagName ( "p" ) ; 
var oldparag = tous [inchoix] ; 
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changement . replaceChild (newparag, oldparag) ; 
document . get Element By Id ( " zonetexte " ) . value=" " ; 
} 



La variable inchoix note le choix de I'utilisateur dans le menu deroulant. La variable intexte reprend le contenu de la 
zone de texte. La variable newparag cree le nouveau paragraphe par la methode createEiement ("p") . La variable 
newtexte cree un nouveau noeud de texte createiextNode (intexte) . Le noeud de texte est associe au noeud element 

(newparag . appendChild (newtexte) ). 

Le paragraphe a supprimer (oldparag) est fourni par tous [inchoix] . Le remplacement du paragraphe s'effectue par la 
methode replaceChild (newparag, oldparag) . La zone de texte est ensuite reinitialisee. 

Et il faut ajouter la fonction changerQ : 

if ( t ypeact ion = = 3 && nombreparag > 0) { 

remplacer () ; 

} 
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Le fichier avec le script complet devient 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>DOM</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

< script type="text / JavaScript "> 

//<! [CDATA [ 

window . onload = init; 

var changement; 

function init() { 

document . getElementsByTagName (" form" ) [0].onsubmit = function() 
{return changer ();} 

changement = document . getElementBy Id ( "modifiable ") ; 
} 

function ajouter() { 

var contenu = document . getElementByld (" zonetexte "). value; 

var newtexte = document . createTextNode (contenu) ; 

var newparag = document . createElement ( "p" ) ; 

newparag . appendChild (newtexte ) ; 

changement . appendChild (newparag) ; 

document . getElementByld ( "zonetexte " ) . value=" " ; 

} 

function supprimer() { 

var choixout = document . getElementByld ( "liste" ). selectedlndex; 

var tous = changement . getElementsByTagName ( "p" ) ; 

var asupprimer = tous [ choixout ] ; 

changement . removeChild (asupprimer) ; 

} 

function inserer () { 

var choixins = document . getElementByld ( "liste" ). selectedlndex; 
var intexte = document . getElementByld (" zonetexte" ) .value; 
var newtexte = document . createTextNode ( intexte ) ; 
var newparag = document . createElement ( "p" ) ; 
newparag . appendChild (newtexte ) ; 

var tous = changement . getElementsByTagName ( "p" ) ; 

var oldparag = tous [choixins] ; 

changement . insertBef ore (newparag, oldparag) ; 

document . getElementByld ( "zonetexte " ) . value=" " ; 

} 

function remplacer() { 

var inchoix = document . getElementByld ( "liste" ) .selectedlndex; 
var intexte = document . getElementByld (" zonetexte" ) .value; 
var newtexte = document . createTextNode (intexte) ; 
var newparag = document . createElement ( "p" ) ; 
newparag . appendChild (newtexte ) ; 

var tous = changement . getElementsByTagName ( "p" ) ; 

var oldparag = tous [inchoix] ; 

changement . replaceChild (newparag, oldparag) ; 

document . getElementByld ( "zonetexte " ) . value=" " ; 

} 

function changer () { 
var typeaction = -1; 

var nombreparag = changement . getElementsByTagName ( "p" ). length; 
var boutonradio = document . getElementsByTagName (" form" ) [0].bouton; 
for (var i=0; i<boutonradio . length; i++) ( 
if (boutonradio [i] . checked) { 
typeaction = i; 
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> 
} 

if (typeaction==-l) { 

alert ("Pas de bouton radio selectionne" ) ; 
} 

if (typeaction==0 ) { 
a jouter () ; 



} 

if (typeaction==l && nombreparag > 0) { 
supprimer ( ) ; 

} 

if (typeaction==2 && nombreparag > 0) { 

inserer ( ) ; 

} 

if (typeaction==3 && nombreparag > 0) { 

remplacer ( ) ; 

} 

document . getElementBy Id (" liste "). opt ions . length = 0; 

for (i=0; i<changement . getElementsByTagName ( "p" ) .length; i++) { 

document . getElementBy Id (" liste "). opt ions [ i ] = new Option (i+1); 

} 

return false; 
} 

//}]> 
</script> 
</head> 
<body> 

<form action=""> 

<p> 

<textarea id=" zonetexte" rows="3" cols="30"x/textarea> 

</p> 
<p> 

<input type="radio" name="bouton" />Ajouter 
<input type="radio" name="bouton" />Supprimer 
<input type="radio" name="bouton" />Inserer avant 
<input type="radio" name="bouton" />Remplacer 

</p> 
<p> 

Quel paragraphe ? : <select id="liste"x/select>  
<input type=" submit " value="Tester " /></p> 
</f orm> 

<div id="modif iable"> </div> 

</body> 

</html> 
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Presentation 



L'objet XMLHttpRequest permet d'envoyer des requetes HTTP vers le serveur, de recevoir des reponses et de mettre a 
jour une partie de la page Web. En mode asynchrone, cette mise a jour se realise sans avoir a recharger la page et done 
de fagon totalement transparente pour I'utilisateur. 

L'objet XMLHttpRequest s'utilise done dans une architecture de type client/serveur. 
Detaillons son mode de fonctionnement : 

• L'objet XMLHttpRequest est cree par le moteur JavaScript du navigateur. 

• Cet objet est alors utilise pour effectuer une requete HTTP vers le serveur. 

• La reponse est fournie par ce dernier au navigateur. 

• A I'aide du Xhtml et des feuilles de style CSS, le resultat est ensuite affiche dans le navigateur. 



L'avantage des applications AJAX reside principalement dans la diminution de la bande passante car seules les donnees 
reclamees sont affichees sans avoir a recharger tout le document, d'ou une interactivity et une fluidite accrue. 

L'objet XMLHttpRequest a initialement ete developpe en tant que controle ActiveX de Microsoft XML Core Services 
(MSXML), implements dans Internet Explorer 5.0, soit en 1999. II y eu, au fil des annees, differentes versions de ce 
composant. Citons : 

• Microsoft. XMLHTTP 



• MSXML2. XMLHTTP 



• MSXML2. XMLHTTP. 3.0 



• MSXML2. XMLHTTP. 4.0 



• MSXML2. XMLHTTP. 5.0 



• MSXML2. XMLHTTP. 6.0 

En 2002, l'objet XMLHttpRequest a ete repris par le projet Mozilla comme objet natif JavaScript. II est ainsi reconnu des 
les premieres versions de Firefox. Les autres navigateurs du marche ont suivi en commercialisant Safari 1.2 en 2004, 
Konqueror, Opera en 2005 et dernierement, a la surprise generale, Internet Explorer 7. 



£S II s'agit d'une bonne nouvelle pour les web-developpeurs : Internet Explorer 7 integre la requete XMLHTTP en tant 
v qu'objet JavaScript natif. Ceci ameliore la compatibility syntaxique entre les differents navigateurs. 
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Bien heureusement, les appels a I'ancien controle ActiveX sont toujours supportes par Internet Explorer 7. 



La compatibility de I'objet XMLHttpRequest peut etre jugee globalement bonne pour les navigateurs recents. Mais dans 
I'absolu, cet objet n'est pas reconnu par les navigateurs de la "vieille generation". 

II faut noter que I'objet XMLHttpRequest n'est pas un standard du Web. Cependant cette situation ne devrait pas 
perdurer car, suite au succes grandissant de I'objet XMLHttpRequest, le W3C a edite differents "working drafts" (5 avril 
2006, 19 juin 2006, 27 septembre 2006) qui devraient deboucher sur une standardisation prochaine. II ne faudra pas 
prevoir de grands cnangements par rapport a la version actuelle d'XmiHttpRequest que Ton trouve actuellement dans les 
navigateurs. Le but de cette demarche est surtout de standardiser specifiquement les specifications de I'objet 
XMLHttpRequest, afin que tous les concepteurs s'accordent sur la meme implementation. 
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Creer un objet XMLHttpRequest 



Pour Internet Explorer (IE 5, IE 5.5, IE 6), il faut passer par des methodes ActiveX proprietaires pour creer une instance 
de I'objet. 

var xhr = new ActiveXObject ( "Microsoft . XML HTTP " ) ; 

ou encore : 

var xhr = new ActiveXObject ( "Msxml2 . XML HTTP " ) ; 

Ces deux methodes fournissent un resultat identique mais varient cependant dans leur mode de fonctionnement. 

La premiere est independante des versions de MSXML. Avec Microsoft. XMLHTTP, I'ActiveXObject initialise la derniere 
bonne version de MSXML. Cet objet peut-etre MSXML 1.0 mais, de nos jours, avec la mutation vers XP et son systeme de 
mise a jour, il va etre vraisemblablement remplace par des versions plus recentes. 

La seconde se base sur une version particuliere de MSXML2. En encodant MSXML2. XMLHTTP, le navigateur va passer en 
revue les differentes versions des librairies MSXML 2.0 pour determiner la meilleure version pour creer cet objet. Chaque 
echec risque d'entramer un message d'erreur. II est utile de prevoir ces eventualites dans le code avec des instructions 
de typetry . . . catch (voir plus loin). 

Pour les autres navigateurs (Mozilla, Firefox, Safari, Konqueror, Opera, IE7), I'objet natif XMLHttpRequest est utilise. 

var xhr = new XMLHt tpReque st () ; 

Comme cette solution est la plus compatible a I'heure actuelle, c'est celle-ci qui sera adoptee dans les instructions. 
Le code pourrait etre : 



if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest ( ) ; 

} 

else if (window .ActiveXObject) { 

var xhr = new ActiveXObject ( "Microsoft . XMLHTTP ") ; 

} 



Un test preliminaire verifie si le navigateur supporte I'objet natif XMLHttpRequest soit, dans le cadre de cet ouvrage, 
pour Firefox et Internet Explorer 7. Si c'est le cas (reponse true), I'objet est cree dans la variable var xhr = new 
XMLHttpRequest o . Dans le cas contraire (reponse false), I'objet est cree par le controle ActiveX soit pour Internet 
Explorer 5, 5.5 ou 6. Dans ce cas I'objet est stocke dans la variable xhr = new ActiveXObject ("Microsoft, xmlhttp") . 

II est peut etre necessaire de prevoir un message d'alerte pour les (rares) utilisateurs dont le navigateur ne reconnait 
pas I'objet XMLHttpRequest et pour lequel I'application AJAX ne fonctionne pas. 

Le code devient alors : 

i f ( window . XMLHttpRequest ) { 

var xhr = new XMLHt tpReque st () ; 

} 

else i f ( wi ndow . Act i veXOb j e ct ) { 

var xhr = new Ac t iveXOb j e ct (" Mi cro s o ft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compat ib 1 e avec AJAX..."); 
} 

Si Ton souhaite utiliser MSXML2. XMLHTTP, le code le plus frequemment rencontre est : 



if (window. XMLHttpRequest) { 
var xhr = new XMLHttpRequest!); 
} 

else if (window. ActiveXObject) { 
try { 

var xhr = new Act iveXOb ject ( "Msxml2 . XMLHTTP ") ; 
} 

catch (e) { 

var xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 
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} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 



La version JavaScript 1.5 a introduit un gestionnaire d'exception avec les instructionstry . . . catch. 

Le principe est simple. L'instruction try designe le code qui doit etre essaye. Si aucune erreur n'est survenue, le bloc de 
commandes de catch est purement et simplement ignore. Si par contre, une exception ou erreur est detectee, le controle 
de I'execution passe directement au bloc de commandes designe par ^instruction catch. Le type d'exception est identifie 
dans une variable (identificateur). A la fin du bloc catch, le programme continue son execution par ^instruction qui suit. 

La suite donnee aux exceptions identifies dans la variable (identificateur) peut prendre des formes multiples selon les 
besoins du programmeur. El les peuvent etre ignorees, traitees par du code ou affichees dans un message d'erreur. II 
est important de noter que ces exceptions ne bloquent pas le deroulement du processus. 



try 

{ 

// instructions a essayer 
} 

catch (identificateur) 

{ 

// instructions alternatives 
} 



Le code teste d'abord I'existence d'un objet natif XMLHttpRequest. Si celui-ci n'est pas trouve, le script se rabat sur le 
controle ActiveX par if(window.ActiveXObject). On demande alors d'essayer (try) de trouver le module MSXML2 
(MSXML2.XMLHTTP). Ce qui est le cas le plus probable (voir point Presentation du present chapitre). Si le module MSXML2 
n'est pas trouve, la commande Microsoft. XMLHTTP est prise en compte (catch). 

Si le developpeur veut etre assure que JavaScript prenne en compte la derniere version du controle ActiveX, on peut 
alors imaginer le script suivant. On essayera d'abord de creer I'objet avec la derniere version de MSXML soit par 
MSXML2. XMLHTTP. 6.0. En cas d'echec, une version plus ancienne est essayee et ainsi de suite jusqu'a ce que I'objet soit 
cree. 

Le code propose est : 



var xhr; 
try { 

xhr = new XMLHttpRequest () ; 
} 

catch (e) { 

var XmlHttpVersions = new Ar ray (' MSXML2 . XMLHTTP . 6 . 0 ' , 

' MSXML2 . XMLHTTP .5.0', 

' MSXML2 . XMLHTTP .4.0', 

' MSXML2 . XMLHTTP .3.0', 

'MSXML2. XMLHTTP' , 

'Microsoft .XMLHTTP' ) ; 

for (var i=0; i<XmlHttpVersions . length && ! xhr; i++) { 
try { 

xhr = new Act iveXObject (XmlHttpVersions [ i ]) ; 
} 

catch (e) { } 

} 

} 

if (!xhr) 

alert ("L' objet XMLHttp n'a pas pu etre cree."); 
} 



En premier lieu I'objet XMLHttpRequest() est instancie. Si I'operation echoue, I'objet ActiveXObjectQ est instancie, pour 
les versions d'Internet Explorer 6 ou anterieures. Dans ce cas, une boucle for passe en revue les differentes versions de 
'MSXML2. XMLHTTP qui ont ete encodees sous la forme d'un tableau Array. On essaye alors de creer I'objet ActiveX par la 
version 6 de MSXML2. Si cela echoue, I'erreur est ignoree car le bloc de commandes de catch est vide. Le code continue 
en tentant de creer I'objet par MSXML2. XMLHTTP. 5.0 et ainsi de suite jusqu'a ce que I'objet soit cree. 

Si I'objet XMLHttpRequest n'a pu etre cree (if ( ! xhr) ), une boTte d'alerte s'affiche pour avertir I'utilisateur. 

Exemole 

Verifions au die d'un bouton, si la variable xhr est bien un objet XMLHttpRequest. La reponse est affichee dans une boite 
d'alerte. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
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"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 

<script type=' text/ JavaScript ' > 

//<! [CDATA [ 

var xhr = null; 

function getxhr ( ) { 

if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

alert ("xhr est un " + xhr) ; 

} 

else if (window. ActiveXOb ject) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

alert ("xhr est un " + xhr); 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 

} 

} 

//] ]> 

</ script> 

</head> 

<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</form> 

</body> 

</html> 



Le resultat dans Internet Explorer 7 est 



r 

Ajax - Windows Internet Explorer 




▼ C:\Documents and Se ^ 








<k 4* gAjax 




i ft- 









Test 



Windows Internet Explorer 



j Poste de travail 



151 



xhr est un [object] 



OK 



Notons que ceci est encore une application de type client. 
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Proprietes et methodes 



Avant de les etudier en detail, jetons un oeil sur les proprietes et methodes de I'objet XMLHttpRequest. 
Les proprietes de I'objet XMLHttpRequest sont : 



Propriete 


Description 


readyState 


Retourne I'etat de la requete. 


onreadystatechange 


Gestionnaire d'evenements qui prend en charge les 
changements d'etat de la requete. 


status 


Renvoie le code numerique de la reponse du serveur 
HTTP. 


statusText 


Renvoie le message lie au code numerique de la 
reponse du serveur HTTP. 


responseText 


Reponse du serveur sous forme de chaine de 
caracteres. 


responseXML 


Reponse du serveur sous forme d'un document XML. 


Les methodes de I'objet XMLHttpRequest sont : 


Methode 


Description 


open ( ) 


Initialise la requete selon une serie de parametres 
fournis en argument. 


send ( ) 


Effectue la requete, avec eventuellement I'envoi de 
donnees. 


getAHResponseHeaders () 


Renvoie I'ensemble de I'en-tete HTTP de la reponse 
sous la forme d'une chaine de caracteres. 


getResponseHeader ( ) 


Renvoie la valeur d'un seul champ de I'en-tete HTTP 
sous la forme d'une chaine de caracteres. 


setRequestHeader ( ) 


Assigne une valeur a un champ d'en-tete HTTP 
eventuellement envoye lors de la requete. 


overr ideMimeType ( ) 


<$I[]Force un document a etre traite selon un type de 
contenu (Mime Type) particulier. 


abort ( ) 


<$I[]>Annule la requete. 
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Effectuer une requete 



Les methodes utilisees pour toutes les requetes HTTP sur le serveur sont open o et sendo : 

• open ( ) configure la requete en specifiant divers parametres ; 

• sendo effectue reellement la requete et accede ainsi au serveur. 

La methode open() se note plus precisement open ("methode", "url du fichier", mode). 
Commentaires : 

• "methode" prend la valeur GET pour recevoir un fichier du serveur distant ou POST pour envoyer un fichier vers le 
serveur. Notons I'emploi de guillemets. 

• "url du fichier" est I'adresse absolue ou relative du fichier. Notons I'emploi de guillemets. En fonction des 
limitations de I'objet XMLHttpRequest, le fichier doit imperativement se situer dans le meme domaine. 

• mode prend la valeur false pour le mode asynchrone qui nous interesse dans le cadre de notre etude ou true 
pour une execution en mode normal, ou synchrone. 

En mode synchrone, tant que la reponse a la requete n'est pas parvenue, le script se met en pause et bloque le 
navigateur. Ce qui n'est jamais tres convivial pour I'utilisateur. 

En mode asynchrone, le script poursuit son execution sans bloquer le processus. Ce qui permet une navigation 
plus fluide et plus confortable pour I'utilisateur. 

La methode send() se note plus precisement send (contenu) 
Commentaires : 

• Avec GET, il faut noter send(null). 

• Avec POST, il faut noter send("donnees"). Les donnees doivent etre sous la forme d'une chaine de requete, 
comme : 

nom=valeur &autrenom=aut re valeur Sains i=de suite 
Par exemple : 

open ( "POST", " ht t p : / / 1 o ca lho s t / a j ax / t e s t . php " , true); 
s end (" p ar ami = x Spar am2 = y " ) ; 

II faut egalement noter que lors de I'envoi de donnees avec la methode POST, il est recommande de changer I'en-tete 
HTTP de la requete a I'aide de la ligne suivante (voir point Quelques proprietes detaillees - Methode getResponse 

Header du present Chapitre) : setRequestHeader (' Content-Type' , ' application/x-www-f orm-urlencoded' ) ; 

Le code devient ; 



if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject) { 

var xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhrob ject . open ( "GET" , "test.txt", false); 
xhr_ob ject . send (null) ; 



ou test.txt est I'adresse relative du fichier. 
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CS Cet ouvrage etant centre sur I'implementation d'AJAX cote client, nous utiliserons surtout la methode GET<$I[]>. 
" La methode POST<$I[]> envoie les donnees vers des programmes serveur PHP ou ASP.net par exemple : le 
traitement des donnees depasse le cadre de cet ouvrage. 
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Quelques proprieties detaillees 



1. Propriete readyState 

La propriete readyState de I'objet XMLHttpRequest permet de connaTtre 1'evolution de la requete. Cette evolution prend 
successivement 5 valeurs reprises dans le tableau suivant : 



Valeur 


Description 


0 ou uninitialized 


La requete n'est pas initialisee. 


1 ou loading 


Debut de transfert des donnees. 


2 ou loaded 


Les donnees sont transferees. 


3 ou interactive 


Les donnees recues sont partiellement accessibles. 


4 ou complete 


Les donnees sont completement accessibles. 



C'est la valeur 4 ou complete qui retient notre attention car, une fois obtenue, les donnees transferees peuvent alors 
etre traitees. 

L'acces a la propriete readyState s'effectue par I'evenement onreadystatechange auquel doit etre associe une fonction. 
Dans le cas present, cette fonction permettra de connaTtre la valeur prise par readyState. 

Le code devient : 



if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest)); 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 

} 

xhr . onreadystatechange = function () { 
if (xhr. readyState ==4) { 
// instructions 

} 
} 

xhr . open ( "GET" , test.txt, false); 
xhr . send (null) ; 

II faut noter que le code ajoute pour connaTtre I'etat de la requete, doit prendre place dans le script avant I'instruction 
sendQ. 

Exemple 1 

Au die sur un bouton, testons si le fichier test.txt a bien ete receptionne (valeur 4 de readyState). Le resultat est affiche 
dans une boTte d'alerte. 

Lefichierexemple.htm : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/ JavaScript' > 

//<! [ CDATA [ 

function getxhr() { 

var xhr=null; 

if (window. XMLHttpRequest) { 
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var xhr = new XMLHttpRequest ( ) ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX. 
} 

xhr . onready statechange = function (){ 
if (xhr . readyState == 4) { 
alert ( "Fichier transmis"); 



xhr. open ("GET", "test.txt", true); 
xhr . send (null) ; 

} 

//]]> 
</script> 
</head> 
<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 



.") 



Le fichier test.txt comporte les mots "Je viens du serveur". 
Le resultat dans Firefox 2 est : 



r 

Ajax - Mozilla Firefox 


BE 


m 


Fichier Edition Affichage Historique Marque-pages 




□ http:/. 







Test 



La page sur http://localhost dit : 



Termine 



! 



Fichier transmis 



OK 



□ 



Cet exemple constitue notre premiere application client-serveur. 

Pour plus de commodite, elle necessite I'installation d'un serveur HTTP local, par exemple IIS {Internet Information 
Services) ou EasyPHP (voir chapitre L'environnement de travail - outils cote-serveur). 



II faut ainsi charger le fichier exemple.htm et test.txt sur le disque dur dans le dossier Inetpub 
utilisez IIS ou Program Files - EasyPHPl-8 - www si vous utilisez EasyPHP. 



wwwroot si vous 



Dans le navigateur, le fichier exemple.htm est accessible en introduisant I'adresse http://localhost/exemple.htm si vous 
utilisez IIS ou http://127.0.0. 1/exemple.htm si vous utilisez EasyPHP. 



C\ Si vous modifiez le fichier htm, il faut garder a I'esprit que le serveur local utilise la copie mise en cache du 
™ navigateur au lieu d'extraire le nouveau le fichier sur le disque dur, risquant ainsi de ne pas tenir compte des 
modifications apportees. 



Exemple 2 

Au die sur un bouton, notons les differents etats de la requete dans une balise <div> . . . </div>. Le fichier test.txt est 
inchange. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/ TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 
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© ENI Editions - All rigths reserved 



<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/ JavaScript' > 

//<! [ CDATA [ 

function getxhr() { 

var xhr=null; 

if (window. XMLHttpRequest ) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 

} 

xhr . onready statechange = function (){ 

monDiv = document . getElementByld ( "DivElement ") ; 

if (xhr . readyState == 1){ 

monDiv. innerHTML += "Status: 1 (loading) <br />"; 

} 

if (xhr . readyState == 2 ) { 

monDiv. innerHTML += "Status: 2 (loaded) <br />"; 

} 

if (xhr . readyState == 3){ 

monDiv. innerHTML += "Status: 3 ( interactive ) <br />"; 

} 

if (xhr . readyState == 4 ) { 

monDiv. innerHTML += "Status: 4 ( complete ) <br />"; 



xhr . open ( "GET" , "test.txt", true); 
xhr . send (null) ; 

} 

//] ]> 
</script> 
</head> 
<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 
</f orm> 

<div id="DivElement"x/div> 

</body> 

</html> 



Le resultat dans Explorer 6 est 



H Ajax - Microsoft Internet Explorer [^\\ H X 


Fichier Edition Affichage Favoris Outils J> /' 


Qprecedente iQ @ l~l ft 

• 


» 






Status: 1 (loading) 


: 


Status: 1 (loading) 




Status: 2 (loaded) 




Status: 3 (interactive) 




Status: 4 (complete) 






v. 


Termine * J Local intranet 



Ne vous etonnez pas si vous n'obtenez pas exactement le meme message. Selon rimplementation de I'objet 
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XMLHttpRequest, certains etats peuvent etre ignores. Ainsi, on rapporte qu'Opera ne tient compte que des etats 3 et 4. 
Internet Explorer ne retient que les etats 2, 3 et 4 lorsque des versions plus recentes de MSXML 2.0 sont utilisees. 

2. Propriete status 

La propriete status renvoie le code HTTP indiquant le resultat de la derniere requete effectuee. 
Celui-ci vaut par exemple : 

• 200 si la requete a ete executee avec succes, 

• 403 pour un acces interdit, 

• 404 pour un fichier non trouve 

• 500 pour une erreur interne au serveur. 



Vous trouverez ci-dessous une liste plus detaillee des codes HTTP. 



Code 


Description 


100 


Continue 


101 


Switching protocols 


200 


OK 


201 


Created 


202 


Accepted 


203 


Non-Authoritative formation 


204 


No Content 


205 


Reset Content 


206 


Partial Content 


300 


Multiple Choices 


301 


Moved Permanently 


302 


Found 


303 


See Other 


304 


Not Modified 


305 


Use Proxy 


307 


Temporary Redirect 


400 


Bad Request 


401 


Unauthorized 


402 


Payment Required 
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403 


Forbidden 


404 


Not Found 


405 


Method Not Allowed 


406 


Not Acceptable 


407 


Proxy Authentification Required 


408 


Request Timeout 


409 


Conflict 


410 


Gone 


411 


Length Required 


412 


Precondition Failed 


413 


Request Entity Too Large 


414 


Request-URI Too Long 


415 


Unsupported Media Type 


416 


Requested Range Not Suitable 


417 


Expectation Failed 


500 


Internal Server Error 


501 


Not Implemented 


502 


Bad Gateway 


503 


Service Unavailable 


504 


Gateway Timeout 


505 


HTTP Version Not Supported 



Une liste complete peut etre consultee a I'adresse : 
www.w3.org/Protocols/rfc2616/rfc2616-secl0.html. 

Les informations fournies par readyState sont, dans la pratique, trop partielles car la requete peut avoir ete effectuee 
mais sans succes (par exemple avec un code 404 fichier non trouve). Ainsi, il est prudent de doubler le test readyState 
= = 4 par status==200 qui confirme que la requete a bien ete effectuee avec succes. 

Le code devient alors ; 

if (window. XMLHttpRequest ) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhr . onreadystatechange = function () { 

if (xhr. readyState == 4 && xhr. status == 200) { 

// instructions 
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} 
} 

xhr . open ( "GET" , test.txt, false); 
xhr . send (null) ; 



Le code complet de I'exemple precedent devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 



<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/ JavaScript' > 

//<! [ CDATA [ 

function getxhr(){ 

var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert ( "Fichier transmis"); 

} 
} 

xhr .open ("GET", "test.txt", true); 
xhr . send (null) ; 

} 

//}]> 
</script> 
</head> 
<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 



La capture d'ecran est identique a celle du point Quelques proprietes detaillees. 
On peut aussi imaginer un autre code. 

if ( xhr . readyState == 4) 

{ 

if (xhr. status == 200) 
{ 

// instructions 



Ici, le test pour verifier si status vaut 200 ne s'effectue que lorsque le fichier a ete transmis (readystate == 4). 



3. Propriete responseText 

La propriete responseText contient la reponse de la requete sous forme de chaine de caracteres (String). 



Au die d'un bouton, affichez dans une boTte d'alerte le texte du fichier test.txt. 
Le fichier test.txt comporte la phrase : "Je viens du serveur". 




} 



Exemple 1 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/ TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/ JavaScript' > 

//<! [ CDATA [ 

function getxhr(){ 

var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 



else { 

alert ("Votre navigateur n'est pas compatible avec AJAX. 

} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert (xhr. responseText) ; 



xhr. open ("GET", "test.txt", true); 
xhr . send (null) ; 

} 

//]]> 
</script> 
</head> 
<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 



.") 



Le resultat dans Internet Explorer 7 est : 



f' Ajax - Windows Internet Explorer ^ 
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Live 



Test 



Windows Internet Explorer 



*j Intranet local 



□ 



Je vi' 



viens du serveur. 



OK 



Exemple 2 

Au die d'un bouton, affichez dans une ligne de texte, le contenu du fichier test.txt. Le fichier test.txt comporte la 
phrase : "Je viens du serveur". 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/ TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/JavaScript' > 
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//<! [ CDATA [ 

function getxhr() { 

var xhr = null; 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else { 

if (window . ActiveXOb ject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 
} 

xhr . onready statechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

document . getElementByld ( "txt " ) .value = "Recu du serveur - " + 
xhr . responseText ; 

} 
} 

xhr . open ( "GET" , "test. txt", true); 
xhr . send (null) ; 

} 

//] ]> 
</script> 
</head> 
<body> 

<form name="ajax" action=""> 

<P> 

<input type="button" value="Envoyer la requete" onclick="getxhr ( ) " /> 

<input type="text" name="texte" id="txt" size="32" value="" /> 

</p> 

</f orm> 

</body> 

</html> 



Le resultat dans Firefox : 



Ajax - Mozilla Firefox Q|§(5< 
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Exemple 3 

Au die d'un bouton, affichez dans une boTte d'alerte, le texte du fichier test.xml. 
Le fichier test.xml est le suivant : 



<?xml version=" 1 . 0 " ?> 

<compilation> 

<mp3> 

<titre>Foule sentimentale</titre> 
<artiste>Alain Souchon</artiste> 
</mp3> 
<mp3> 

<titre>Shape of my heart</titre> 

<artiste>Sting</artiste> 

</mp3> 

<mp3> 

<titre>Ta douleur</titre> 
<artiste>Camille</ artiste> 
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</mp3> 

</compilation> 



Le code du fichier htm est : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 . org/TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/JavaScript' > 

//<! [ CDATA [ 

function getxhr() { 

var xhr=null; 

if (window. XMLHttpRequest ) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert (xhr . responseText) ; 

} 
} 

xhr . open ( "GET" , "test. xml", true); 
xhr . send (null) ; 

} 

//]]> 
</script> 
</head> 
<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 
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<?xml version="l,0"?> 
compilation > 
<mp3> 

<titre >Foule sentimentale </titre > 
<artiste> Alain Souchon</artiste> 
</mp3> 
<mp3> 

<titre>Shape of my heart </titre> 
<artiste >Sting </artiste > 
</mp3> 
<mp3> 

<titre>Ta douleur</titre> 
<artiste >Camille </artiste > 
</mp3> 
</compilation> 



OK 



Le fichier XML est retourne dans cet exemple, comme une chaTne de caractere et non sous la forme d'un objet avec la 
structuration du fichier XML. Les elements ne sont pas accessibles par des methodes comme getEiementByid, 

getElementsByTagName OU equivalentes. 



4. Propriete responseXML 

La propriete responseXML renvoie les donnees comme un objet document XML. II pourra alors etre examine et traite 
selon les methodes et proprietes du Document Object Model (DOM). 

Soit avec le fichier XML suivant : 

<?xml version=" 1 . 0 " ?> 
<racine> 

Je suis un texte 
</racine> 

L'element "Je suis un test" est accessible par le code : 

var xmldoc = xh r . r e spon s eXML ; 

var rootjode = xmldoc . get E lement sByTagName (' racine ' ) [0]; 
alert ( rootjode . f irstChild. nodeValue) ; 

Nous reviendrons plus longuement sur I'acces aux donnees XML et leur traitement dans le chapitre suivant consacre a 
AJAX. 



f\ II est a remarquer lors de I'etude de ce chapitre que la methode XMLHttp- Request porte finalement assez mal 
son nom car elle ne traite pas que du XML mais aussi du texte et tous ses derives comme des fichiers Xhtml ou 
Html, des fichiers JavaScript ou tout autre code. 



Exemple 

Au die d'un bouton, affichez dans une boTte d'alerte le texte du fichier test.xml. 
Le fichier test.xml est identique a celui du point precedent. 
Le code du fichier htm est : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www. w3 . org/ TR/xhtmll /DTD /xhtml 1-trans it ional . dtd"> 
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<html xmlns="http://www. w3.org/1999/xhtml" xml : lang="f r" lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html " /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

<script type=' text/ JavaScript' > 

//<! [ CDATA [ 

function getxhr() { 

var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 

} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 

} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert (xhr . responseXML) ; 



xhr . open ( "GET" , "test. xml", true); 
xhr . send (null) ; 

} 

//] ]> 
</script> 
</head> 
<body> 
<f orm> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 
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Avec responseXML, le fichier XML est bien retourne comme un objet. 



' ENI Editions - All rigths reserved 



Quelques methodes detaillees 



1. Methode getAIIResponseHeaders 

Pour ce qui suit, il faut bien distinguer un en-tete HTTP et un en-tete de fichier Html. Les balises comprises dans un en- 
tete Html, soit entre les balises <head> . . . </head> envoient des informations concernant la page Html, tandis que les 
en-tetes HTTP envoient des informations relatives au fichier. 

L'en-tete HTTP est un court message que le serveur Web envoie au navigateur juste avant de lui transmettre le 
document lui-meme. Ce message sert par exemple a donner la ta i I le du document ou a indiquer qu'il a disparu (code 
404). II peut aussi servir a preciser I'encodage du fichier grace a la ligne Content-Type. 

II faut aussi noter qu'avec une requete HTTP, le serveur renvoie les en-tetes de la ressource ou du fichier, pas le fichier 
lui-meme. Cela signifie que des renseignements sur un document comme Content-type ou last-modified sont connus 
sans avoir a telecharger le document lui-meme. 

La methode getAIIResponseHeaders o renvoie tous les en-tetes HTTP de la reponse sous la forme d'une chaine de 
caracteres. 

Exemple 

Au die d'un bouton, afficher dans une boite d'alerte, tous les en-tetes du fichier test.txt. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<script type=' text/ JavaScript' > 

//<! [CDATA [ 

function getxhr() { 

var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP" ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert (xhr . getAIIResponseHeaders 0 ) ; 

} 

} 

xhr . open ( "GET", "test . txt " , true) ; 

xhr . send (null ) ; 

} 

//] ]> 
</script> 
</head> 
<body> 
<f orm> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 



Sous Internet Explorer : 
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g \ Content-Type: text/plain 
;\ ETag: "70f34bfbc855c71:c74" 

Content-Length: 20 

Last-Modified: Wed, 21 Feb 2007 15:00:10 GMT 



OK 



Sous Firefox : 



Ajax - Mozilla Firefox 13(5 
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1 La page sur http://localhost dit X 



i Server: Microsoft-IIS/5. 1 
/ ' \ Date: Wed, 29 Nov 2006 15:06:03 GMT 
Content-Type: text/plain 
Termine Accept-Ranges: bytes 

Last-Modified: Tue, 28 Nov 2006 11:10:58 GMT 
Etag: "71f564elddl2c71:a33" 
Content-Length: 20 



OK 



2. Methode getResponseHeader 

La methode getResponseHeader o renvoie la valeur d'un seul champ de I'entete HTTP sous forme d'une chaine de 
caracteres. 

Elle prend la forme de getResponseHeader ( "nom du parametre d' en-tete HTTP"). 

Soit, xhr .getResponseHeader ("Content-Type") qui ne retourne que les renseignements concernant le type de contenu 
(Content-Type). 

Exemple 

Au die d'un bouton, afficher dans une boite d'alerte, I'en-tete de contenu de fichier (Content-type) du fichier test.xml : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www. w3 . org/ 1 99 9/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CD ATA [ 

function getxhr() { 
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var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP" ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX...") 
} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

alert (xhr . getResponseHeader ( "Content-type " ) ) ; 

} 

} 

xhr . open ( "GET", "test . xml" , true) ; 

xhr . send (null ) ; 

} 

//]]> 
</script> 
</head> 
<body> 
<f orm> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</f orm> 

</body> 

</html> 
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3. Methode setRequestHeader 

Cette methode assigne une valeur a un champ d'en-tete HTTP qui est envoyee lors de la requete. 

El le prend la forme de setRequestHeader("nom du parametre d'en-tete"," valeur associee au parametre"). 

Elle est specialement utilisee lors d'un envoi avec la methode POST pour specifier I'encodage : 

xhr. s et Re que s t Heade r ("Content-type", "application/x-www-form-urlencoded") ; 



4. Methode overrideMimeType 

Cette methode force un document a etre traite selon un type de contenu particulier (Mime Type). On appelle souvent 
cette methode lors de I'utilisation de responseXML sur un serveur transmettant du XML avec un en-tete Content-Type 
incorrect. 
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xhr . req . over rideMimeType (' text /xml ' ) ; 
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Introduction 



L'approche AJAX<$I[] a ete definie au chapitre Presentation generale d'AJAX, comme I'utilisation conjointe du JavaScript, 
du XML, du XSL, du DOM et de I'objet XMLHttpRequest. Le present chapitre a comme objectif de realiser la synthese des 
differents composants etudies pour aboutir a des applications AJAX. 

Rappelons egalement que la definition d'AJAX (JavaScript et XML en mode asynchrone) ne doit pas etre prise au pied de 
la lettre car I'objet XMLHttpRequest permet de prendre en charge non seulement du XML mais egalement du texte brut. 
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Recuperer et traiter du texte 



C'est assurement la fagon la plus simple d'apprehender le concept AJAX. El le reste neanmoins tres riche au niveau des 
possibilities offertes aux developpeurs. 

Affichons, de fagon asynchrone, une reponse sous forme de texte dans une zone de la page par la propriete 
responseText. 

Soit une page Xhtml. Au die de I'utilisateur sur le bouton de formulaire, la reponse est affichee dans I'element <div id=" 
affichage "> ... </div>. 

Le fichier texte comporte les mots : "Cesar du meilleur film frangais : Jacques Audiard pour "De battre mon cceur s'est 
arrete". II est enregistre sur le serveur sous le nom de cesar2006.txt. 

Le fichier Xhtml se presente comme suit : 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 999/xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 

charset=iso-8859-l" /> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 
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Elaborons le script pas a pas. 

Au die sur le bouton, la fonction extraireQ est appelee. 



var xhr = null; 

function extraireO { 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert("Votre navigateur n'est pas compatible avec AJAX..."); 
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Apres avoir defini la variable xhr comme une variable globale, le script definit la requete HTTP vers le serveur de fagon 
compatible avec les differents navigateurs. Ces lignes de script ont ete largement abordees au chapitre L'objet 
XmlHttpRequest - Creer un objet XMLHttpRequest. 



if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var txtdocument = xhr . responseText ; 

af ficher (txtdocument) ; 

} 

} 

xhr .open ("GET", "cesar2 0 0 6.txt", true); 

xhr . send (null ) ; 

} 

> 



La requete doit aller rechercher selon la methode GET, le fichier cesar2006.txt de fagon asynchrone (voir chapitre L'objet 
XmlHttpRequest - Effectuer une requete). 

Au changement d'etat de la requete (onreadystatechange), on s'assure tout d'abord, comme etudie au chapitre L'objet 
XmlHttpRequest - Quelques proprietes detaillees qu'elle a bien abouti (readyState == 4 et status == 200). Le fichier 
est renvoye simplement comme un fichier texte par responseText (cf chapitre L'objet XmlHttpRequest - Quelques 
proprietes detaillees ). Le script passe alors la main a la fonction afficher() avec le fichier texte en argument (afficher 

(txtdocument ) ). 

function a f f i che r ( t xt do cumen t ) { 

var target = document . ge t E 1 ement By I d ( " a f f i chage " ) ; 
t ar get . inne r HTML = txtdocument; 

La fonction afficherQ repere tout d'abord la zone d'affichage pour la reponse, par son identifiant getEiementByid 
("affichage") ;. La cible est ainsi determinee, et la reponse est alors affichee par la propriete inneHTML. 

Le script complet devient done : 



<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

function afficher (txtdocument ) { 

var target = document . getEiementByid ( "affichage" ) ; 

target . innerHTML = txtdocument; 

} 

var xhr = null; 

function extraire(){ 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var txtdocument = xhr . responseText ; 

afficher (txtdocument) ; 

} 

} 

xhr .open ("GET", "cesar2 0 0 6.txt", true) ; 

xhr . send (null ) ; 

} 

} 

//] ]> 

</ script> 



Le document Xhtml devient : 



| <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 
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"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

function af f icher (txtdocument ) { 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = txtdocument; 

} 

var xhr = null; 

function extraireO { 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var txtdocument = xhr . responseText ; 

af ficher (txtdocument) ; 

} 

} 

xhr .open ("GET", "cesar2 0 0 6.txt", true); 

xhr . send (null ) ; 

} 

} 

//}]> 

</ script> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af ficher le Cesar" onclick="extraire ( ) " /> 
</form> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 



Le fichier se presente des lors comme suit a I'ecran : 
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Diverses sources recommandent d'afficher la reponse, fournie par I'approche Ajax, en evidence, a I'intention des 
internautes debutants qui pourraient etre pertubes dans leurs habitudes de navigation, ce qui peut se realiser aisement 
par une feuille de style CSS. 



<style type="text/css"> 

<! — 

#affichage { 
width: 250px; 
font-family: sans-serif; 
font-weight: bold; 
font-size: 16px; 
margin: lOpx; 
padding: 5px; 
background-color: #9cf; 



</style> 



Ainsi la zone d'affichage possede un arriere-plan de couleur et est delimitee par une bordure. En outre la police de 
caracteres est differente. 

Le fichier Xhtml final prend la forme suivante : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<<meta http-equiv="Content-Style-Type" content="text/css" /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function af f icher (txtdocument ) { 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = txtdocument; 

} 

var xhr = null; 

function extraireO { 

if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject) { 

xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 



else { 

alert ("Votre navigateur n'est pas compatible avec AJAX. 
} 

if (xhr) { 
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xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var txtdocument = xhr . responseText ; 

afficher (txtdocument) ; 

} 

} 

xhr .open ("GET", "cesar2 0 0 6.txt", true); 

xhr . send (null ) ; 

} 

} 

//] ]> 

</ script> 

<style type="text/css"> 

<! — 

#affichage { 
width: 250px; 
font-family: sans-serif; 
font-weight: bold; 
font-size: 16px; 
margin: lOpx; 
padding: 5px; 
background-color: #9cf; 



</style> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</ f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 
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C\ II ne faut pas s'arreter a une interpretation limitative de la propriete responseText. En effet, cela signifie que la 
" reponse est renvoyee sous forme de texte au sens informatique du terme. Tous les types de format sont 

acceptes ; des sfichiers Xhtml, des donnees traitees par du PHP en passant par du code JavaScript. Le tout depend de 

I'utilisation ulterieure de ces donnees textuelles. 



Soit un fichierjs.txt qui contient le texte : alert("Message d'alerte provenant du serveur"). 

Prenons un fichier Xhtml (js.htm). Ce fichier ne contient aucune instruction alertQ. Pourtant une boite d'alerte peut etre 
creee en executant le code JavaScript a partir de la chaine de caracteres contenue dans le fichier js.txt. Ce qui est 
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effectue par la methode evalQ. 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text /html " /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 

<script type=' text/ JavaScript' > 

//<! [CDATA [ 

function getxhr ( ) { 

var xhr = null; 

if (window. XMLHttpRequest) { 

var xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

var xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

eval(xhr. responseText ) ; 

} 

} 

xhr .open ("GET", "js.txt", true); 

xhr . send (null ) ; 

} 

//] ]> 

</ script> 

</head> 

<body> 

<form action=""> 

<input type="button" value="Test" onclick="getxhr ( ) " /> 

</ f orm> 

</body> 

</html> 



Une boite d'alerte s'affiche done, alors qu'elle n'etait pas presente dans le code de la page Xhtml. 
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Recuperer et traiter du XML 



1. Par les noeuds - Internet Explorer 

Soit le fichier cesar2006.xml : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 

<evenement>Ceremonie des Cesars</evenement> 

<su jet>Palmares</su jet> 

<date>2006</date> 

<cesar> 

<categorie> 

<prix>Cesar du meilleur acteur</prix> 
<nom>Michel Bouquet</nom> 

<film>Le promeneur du Champ de Mar s</f ilm> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film f rancais</prix> 
<nom>Jacques Audiard</nom> 

<film>De battre mon coeur s'est arrete</f ilm> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film etranger</prix> 

<nom>Clint Eastwood</nom> 

<f ilm>Million dollar baby</film> 

</categorie> 

</cesar> 

</cinema> 



Sa structure est la suivante : 

< c i nema> 

<evenement > < / e venement > 

<sujet></sujet> 

<date></date> 

<cesar> 

<categorie> 

<prixx/prix> 
<nom> < / nom> 
<f ilmx/f ilm> 
</ categorie> 
</ cesar> 
< / c i nema> 

On souhaite, au die d'un bouton, extraire les donnees incluses dans la troisieme balise <categorie>. Soient les 
informations : 



Cesar du meilleur film etranger 
Clint Eastwood 
Million dollar baby 



Le fichier Xhtml de depart comporte simplement un bouton de formulaire et une balise <div id="af fichage"> servant 
de conteneur pour la reponse. 



IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; char set=iso-8 85 9-1 " /> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 
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<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 



Etudions le script en detail. 

<script type=' text/ JavaScript' > 
//< ! [CDATA [ 



Le script commence par ('initialisation de I'objet XmlHttpRequest ou du controle ActiveX correspondant, comme cela a 
ete etudie au chapitre L'objet XmlHttpRequest - Creer un objet XmlhttpRequest de cet ouvrage. 



var xhr = null; 




function extraire () { 




if (window . XMLHttpRequest ) { 




xhr = new XMLHttpRequest () ; 
} 




else if (window .Act iveXObject ) { 




xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 




} 

else { 




alert ("Votre navigateur n'est pas compatible avec AJAX. 
} 


■ "); 



Si l'objet xhr existe, le script lance la requete HTTP en veillant a utiliser la propriete responseXML pour recuperer le 
fichier cesar2006.xml. Celui-ci est alors transmis a la fonction afficherQ. 



if (xhr) { 

xhr . onreadystatechange = function)) { 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", "cesar2006 . xml" , true); 

xhr . send (null ) ; 

} 

> 



La fonction afficherQ doit tout d'abord, parcourir I'arborescence du fichier XML pour retrouver I'information souhaitee. 
Nous utilisons pour ce faire, les acquis du chapitre Le DOM (Document Object Model). 

Ce document XML a une balise racine appelee <cinema> 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 



</cinema> 

On accede a ce nceud racine avec la propriete JavaScripWocumenrE/emenr. 

function afficher (xmldocument) { 
var cinema; 

cinema = xmldocument . documentElement ; 

} 

La variable cinema contient maintenant I'arborescence du fichier XML avec tous ses elements enfants. 

Le nceud correspondant a la balise <cesar> est atteint par la propriete lastChild du nceud racine soit la variable cinema. 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
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<cinema> 

<evenement>Ceremonie des Cesars</evenement> 

<su jet>Palmares</su jet> 

<date>2006</date> 

<cesar> 



</cesar> 

</cinema> 



La fonction affichero devient : 



function af f icher (xmldocument) { 
var cinema, cesar, categorie; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 

} 



II nous faut ensuite acceder a la troisieme balise <categorie>. On utilise a nouveau la propriete lastChild mais cette fois 
appliquee au noeud cesar. 



<?xml version="l . 0" encoding=" ISO-88 59-l"?> 
<cinema> 

<evenement>Ceremonie des Cesars</evenement> 

<su jet>Palmares</su jet> 

<date>2006</date> 

<cesar> 

<categorie> 

<prix>Cesar du meilleur acteur</prix> 
<nom>Michel Bouquet</nom> 

<film>Le promeneur du Champ de Mars</film> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film f rangais</prix> 
<nom>Jacques Audiard</nom> 

<film>De battre mon coeur s'est arrete</f ilm> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film etranger</prix> 
<nom>Clint Eastwood</nom> 
<film>Million dollar baby</film> 
</categorie> 

</cesar> 
</cinema> 



La fonction af f icher o devient : 



function aff icher (xmldocument) { 
var cinema, cesar, categorie; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 

} 



II est possible maintenant d'acceder a la balise <prix> en utilisant la propriete firstChild de la troisieme balise 

<categorie> OU de notre variable categorie. 



<categorie> 

<prix>Cesar du meilleur film etranger</prix> 

<nom>Clint Eastwood</nom> 

<f ilm>Million dollar baby</film> 

</categorie> 
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La fonction afficherf) devient 



function af f icher (xmldocument) { 
var cinema, cesar, categorie; 
var prix; 

cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 

} 



Nous pouvons a ce stade extraire le texte associe a la balise <prix>. 
<prix>Cesar du meilleur film et range r < /prix> 

Le noeud texte "Cesar du meilleur film etranger" est un element enfant de la balise <prix>. La propriete firstChild de la 
variable prix permet d'y acceder. Le texte lui-meme est recupere par la propriete nodeValue. 

Le script devient : 

function aff icher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, textediv; 

cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
textediv = prix . firstChild. nodeValue; 



} 



II suffit alors d'afficher (innerHTML) ce texte dans la balise <div id="af f ichage"> . . . </div>, reperee dans le 
document par la methode getEiementByid. 



function aff icher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, textediv; 

cinema = xmldocument . documentElement ; 

cesar = cinema . lastChild; 

categorie = cesar . lastChild; 

prix = categorie . firstChild; 

textediv = prix . firstChild. nodeValue; 

var target = document . getEiementByid ("aff ichage" ) ; 

target . innerHTML = textediv; 

} 



Procedons de meme pour la balise <nom>, elle est atteinte par la propriete next-Sibling appliquee au nceud prix. Le 
nceud texte "Clint Eastwood" est un element enfant de la balise <nom>. On peut y acceder par la propriete firstChild de 
la variable nom. Le texte lui-meme est recupere par la propriete nodeValue. 

<nom>Clint Eastwood< /nom> 

Le code se complete alors comme suit : 



function aff icher (xmldocument) { 

var cinema, cesar, categorie; 

var prix, nom, textediv; 

cinema = xmldocument . documentElement ; 

cesar = cinema . lastChild; 

categorie = cesar . lastChild; 

prix = categorie . fir stChild; 

nom = prix.nextSibling; 
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textediv = (prix . f irstChild . nodeValue + "<br />" + 
nom. firstChild. node Value) ; 

var target = document . getElementBy Id ( "affichage" ) ; 
target . innerHTML = textediv; 

} 



Nous pouvons terminer par la balise <fiim> atteinte en utilisant la propriete lastChild de la balise <categorie>. 
<f ilm>Million dollar baby</film> 

Le noeud texte "Million dollar baby" est un element enfant de la balise <fiim> accedee par la propriete firstChild de la 
variable film. Le texte lui-meme est recupere par la propriete nodeValue. 

Le code final de la fonction afficher() est : 



function af f icher (xmldocument ) { 
var cinema, cesar, categorie; 
var prix, nom, film, textediv; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
nom = prix . nextSibling; 
film = categorie . lastChild; 

textediv = (prix . firstChild . nodeValue + "<br />" + 

nom. firstChild. nodeValue + "<br />" + film. firstChild. nodeValue) ; 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = textediv; 

} 

//] ]> 
</script> 

Le script est termine. 

Le code complet du script est : 

<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function aff icher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, nom, film, textediv; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
nom = prix . nextSibling; 
film = categorie . lastChild; 

textediv = (prix . firstChild . nodeValue + "<br />" + 

nom. firstChild. nodeValue + "<br />" + film . f irstChild . nodeValue ) ; 

var target = document . getElementBy Id ( "aff ichage" ) ; 

target . innerHTML = textediv; 

} 

var xhr = null; 

function extraire () { 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window. ActiveXOb ject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function)) { 

if (xhr . readyState == 4 && xhr. status == 200) { 
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var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", " cesar20 0 6 . xml " , true); 

xhr . send (null ) ; 

} 

} 

//]]> 
</script> 



Le fichier Xhtml se presente alors comme suit : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3 . org/TR/xhtml 1 /DTD/xhtml 1 -trans it ional .dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function afficher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, nom, film, textediv; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
nom = prix . nextSibling; 
film = categorie . lastChild; 

textediv = (prix . firstChild . nodeValue + "<br />" + 

nom. firstChild. nodeValue + "<br />" + film . fir stChild . nodeValue ) ; 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = textediv; 

} 

var xhr = null; 

function extraire(){ 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function)) { 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", "cesar2006 . xml" , true); 

xhr . send (null ) ; 

} 

} 

//}]> 
</script> 
</head> 
<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 
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La reponse ici ! 
</div> 
</body> 
</html> 

A ce stade de notre travail, la capture d'ecran est la suivante 



Ajax - Windows Internet Explorer 



▼ [g] rittp://localhost/chape v.| |*»j | X | 



Ceremonie des Cesars 2006 

Afficher le Cesar 



Cesar du meilleur film etranger 
Clint Eastwood 
Million dollar baby 



* J Intranet local 



% 100% 



Ajoutons une feuille de style afin d'egayer un peu la presentation. 



<style> 
<! — 

#affichage { 
width: 250px; 
height: 50px; 
font-family: sans-serif; 
font-variant: small-caps; 
font-size: 14px; 
line-height: 18px; 
background-color: #9cf; 
padding: 5px; 
— > 

</style> 



Le fichier Xhtml final est le suivant 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function af f icher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, nom, film, textediv; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
nom = prix . nextSibling; 
film = categorie . lastChild; 

textediv = (prix . firstChild . nodeValue + "<br />" + 

nom . firstChild . nodeValue + "<br />" + film . fir stChild . nodeValue) ; 

var target = document . getElementBy Id ( "affichage" ) ; 
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target . innerHTML = textediv; 
} 

var xhr = null; 

function extraire() { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function)) { 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", " cesar20 0 6 . xml " , true); 

xhr . send (null ) ; 

} 

} 

//}]> 
</script> 
<style> 
<! — 

#affichage { 
width: 250px; 
height: 50px; 
font-family: sans-serif; 
font-variant: small-caps; 
font-size: 14px; 
line-height: 18px; 
background-color: #9cf; 
padding: 5px; 
— > 

</style> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 



- 8- 



© ENI Editions - All rigths reserved 



£ Ajax - Windows Internet Explorer 



- nl 



Q)^}- [g] http://localhc.st/chap£ v \ \ *t ■ X 



Ceremonie des Cesars 2006 



Afficher le Cesar 



CESAR DU MEILLEUR FILM ETRANGER 
CLINT EASTWOOD 
MILLION DOLLAR BABY 

*j Intranet local 




, 100% 



2. Par les noeuds - Firefox 

Firefox et les autres navigateurs de la famille Mozilla traitent tous les espaces vides ainsi que les indentations du code 
XML comme des noeuds de texte vide (voir chapitre Le DOM (Document Object Model) - Particularity de Firefox). 

Reprenons notre fichier cesar2006.xml. 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 

<evenement>Ceremonie des Cesars</evenement> 

<su jet>Palmares</su jet> 

<date>2006</date> 

<cesar> 

<categorie> 

<prix>Cesar du meilleur acteur</prix> 
<nom>Michel Bouquet</nom> 

<film>Le promeneur du Champ de Mars</film> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film f rangais</prix> 
<nom>Jacques Audiard</nom> 

<film>De battre mon coeur s'est arrete</f ilm> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film etranger</prix> 

<nom>Clint Eastwood</nom> 

<f ilm>Million dollar baby</film> 

</categorie> 

</cesar> 

</cinema> 



Pour Internet Explorer, le noeud racine est <cinema>. Le premier nceud enfant (firstChild) est la balise <evenement>. Le 
second noeud enfant est la balise <sujet> et ainsi de suite. 

Les choses sont differentes avec Firefox. Pour ce navigateur, le nceud racine est toujours <cinema> mais le premier 
element enfant est un noeud texte vide qui inclut le passage a la ligne apres la balise <cinema>. Ainsi pour Firefox, le 
fichier XML se presente comme suit : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 
noeud texte 

<evenement>Ceremonie des Cesars</evenement> 
noeud texte 

<su jet>Palmares</su jet> 
noeud texte 

<date>2006</date> 
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noeud texte 

<cesar> 
noeud texte 

<categorie> 

noeud texte 

<prix>Cesar du meilleur acteur</prix> 

noeud texte 
<nom>Michel Bouquet</nom> 

noeud texte 

<film>Le promeneur du Champ de Mars</film> 
noeud texte 

</categorie> 



II faudra tenir compte de cette particularity dans I'elaboration du code. 
Commencons par acceder a I'element racine du document. 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 



</cinema> 



Tout comme pour Internet Explorer, la propriete document. Element de I'objet document XML est reprise. 

function af f iche (xmldocument ) { 
var cinema; 

cinema = xmldocument . documentElement ; 

} 



Les choses se compliquent pour atteindre la balise </cesar>. On pourrait croire que la balise </cesar> est le dernier 
enfant (lastChild) de la balise <cinema>. Mais pour Firefox, le dernier enfant de la balise <cinema> est un noeud texte qui 

Suit la balise </cesar>. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 
nceud texte 

<evenement>Ceremonie des Cesars</evenement> 
nceud texte 

<su jet>Palmares</su jet> 

nceud texte 
<date>2006</date> 
nceud texte 
<cesar> 



</ cesar> 
noeud texte 

</cinema> 

Ainsi, au lieu d'utiliser cinema. lastchiid, il faut remonter d'un cran dans I'arborescence pour eviter le noeud texte et 
acceder a I'element <cesar> . . . </cesar>, ce qui peut se realiser avec la propriete previoussibiing. 



function aff iche (xmldocument ) { 
var cinema, cesar; 

cinema = xmldocument . documentElement ; 
cesar = cinema. lastChild. previousSibling; 

> 



Pour les memes raisons, la troisieme balise <categorie> ne peut pas etre atteinte par la propriete lastChild appliquee a 
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I'element <cesar>. 



<cesar> 



<categorie> 

nceud texte 

<prix>Cesar du meilleur film etranger</prix> 
nceud texte 

<nom>Clint Eastwood</nom> 
nceud texte 

<f ilm>Million dollar baby</film> 
nceud texte 
</categorie> 
noeud texte 

</cesar> 



Elle est atteinte par categorie = cesar.lastChild.previousSibling. 
Et ainsi de suite ... 

Le code complet pour Firefox devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function af f icher (xmldocument) { 

var cinema, cesar, categorie; 

var prix, nom, film, textediv; 

cinema = xmldocument . documentElement ; 

cesar = cinema. lastChild. previousSibling; 

categorie = cesar . lastChild. previousSibling; 

prix = categorie . firstChild . nextSibling; 

nom = prix . nextSibling . nextSibling; 

film = categorie . lastChild . previousSibling; 

textediv = (prix . firstChild . nodeValue + "<br />" + 

nom. firstChild. nodeValue + "<br />" + film . fir stChild . nodeValue ) ; 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = textediv; 

} 

var xhr = null; 

function extraire(){ 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function)) { 

if (xhr . readyState == 4 && xhr. status == 2 00) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", " cesar20 0 6 . xml " , true); 

xhr . send (null ) ; 

} 

> 
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//] ]> 

</script> 

</head> 

<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 



Ajax - Mozilla Firefox 



Fjchier Edition Affichage Historique Marque-pages Outils 



(g 3 t2 1 U hup;/. 



Ceremonie des Cesars 2006 



Afficher le Cesar 



Cesar du meilleur film etranger 
Clint Eastwood 
Million dollar baby 



Termine 



JL O 



Cela fonctionne correctement en utilisant le navigateur Firefox, mais le script est complique a mettre en place. Non 
seulement, il faut "sauter" les nceuds texte mais en plus, le code pour Firefox differe de celui d'Internet Explorer. La 
solution est un script compatible pour les deux navigateurs. 



3. Par les noeuds - solution compatible 

Pour rendre le script compatible, il suffit, avant toute manipulation de code, d'enlever les espaces vides du document 
XML. Ainsi, ces problematiques noeuds de texte vide introduits par Firefox disparaissent et le meme code peut etre 
utilise pour naviguer dans le document que Ton utilise Firefox ou bien Internet Explorer. 

Nous allons elaborer une fonction enleverespacesQ qui permet de supprimer les espaces vides dans le code XML. 

Au debut de cette fonction, une boucle for permet de passer en revue les differents noeuds enfant grace a la propriete 
childNodes (voir chapitre Le DOM (Document Object Model) - Proprietes de I'Objet Node). 



function enleverespaces (xmldocument ) { 
var index; 

for (index = 0; index < xmldocument . childNodes . length; index++) { 
var noeudc = xml . childNodes (index) ; 



} 
} 



A cette etape de la boucle, le nceud courant est stocke dans la variable noeudc. 

S'il s'agit d'un noaud element (noeudc. nodeType == 1), cet element peut, a son tour, avoir des noeuds enfant pour 
lesquels il faut enlever les espaces vides. Dans ce cas, ce nceud courant est renvoye a la fonction enleverespaces () en 
le fournissant comme argument de la fonction, soit enleverespaces (noeudc) . 



function enleverespaces (xmldocument ) { 
var index; 
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for (index = 0; index < xmldocument . childNodes . length; index++) { 

var noeudc = xmldocument . childNodes [index] ; 

if (noeudc. nodeType ==1) { 

enleverespaces (noeudc) ; 

> 



} 
} 



Par ailleurs, si le noeud courant est un noeud texte (noeudc. nodeType == 3), il s'agit peut-etre d'un espace vide. Nous 
allons tester le texte present dans le noeud (propriete nodeValue) au moyen d'une expression reguliere(voir chapitre Le 
JavaScript - Manipulation des chames de caracteres) qui permet de deceler les espaces vides, soit I'instruction 

(/ A \s+$/.test (noeudc . nodeValue) ). 

Nous allons done verifier si le nceud courant comporte des espaces vides et est un nceud texte (if ( (/"\s+$/ .test 
(noeudc. nodeValue) ) && (noeudc. nodeType == 3))). Dans I'affirmative, il suffit alors d'appliquer la propriete 
removeChild pour enlever ce nceud. II ne faut pas oublier de decrementer I'index d'une position. 



function enleverespaces (xmldocument ) { 
var index; 

for (index = 0; index < xmldocument . childNodes . length; index++) { 

var noeudc = xmldocument . childNodes [index] ; 

if (noeudc . nodeType == 1) { 

enleverespaces (noeudc) ; 

} 

if ( (/ A \s+$/ .test (noeudc. nodeValue) ) && (noeudc . nodeType ==3)) { 

xmldocument . removeChild (xmldocument . childNodes [index — ] ) ; 

} 

) 
} 



Pour rendre le script compatible avec les navigateurs, cette fonction est appelee pour eliminer les espaces vides du 
code XML pour Firefox. L'incompatibilite introduite par Firefox ayant disparu, il est des lors possible d'utiliser le meme 
code pour Firefox et Internet Explorer. 

Le fichier Xhtml compatible se presente comme suit : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; char set=iso-8 85 9-1 " /> 
<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function enleverespaces (xmldocument ) { 
var index; 

for (index = 0; index < xmldocument . childNodes . length; index++) { 

var noeudc = xmldocument . childNodes [index] ; 

if (noeudc . nodeType == 1) { 

enleverespaces (noeudc) ; 

} 

if ( (/ A \s + $/ .test (noeudc .nodeValue) ) && (noeudc . nodeType ==3)) { 

xmldocument . removeChild (xmldocument . childNodes [ index — ] ) ; 

} 

> 

} 

function afficher (xmldocument) { 
var cinema, cesar, categorie; 
var prix, nom, film, textediv; 
cinema = xmldocument . documentElement ; 
cesar = cinema . lastChild; 
categorie = cesar . lastChild; 
prix = categorie . firstChild; 
nom = prix . nextSibling; 
film = categorie . lastChild; 

textediv = (prix . firstChild . nodeValue + "<br />" + 
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nom . f irstChild . nodeValue + "<br />" + film . fir stChild . nodeValue) ; 
var target = document . getElementBy Id ( "affichage" ) ; 
target . innerHTML = textediv; 
} 

var xhr = null; 

function extraire() { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

if (navigator . userAgent . indexOf ( "Firef ox" ) != -1) { 

enleverespaces (xmldocument) ; 

} 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", "cesar2006 . xml" , true) ; 

xhr . send (null ) ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Af f icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 
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4. Par la methode GetElementsByTagName 



Le procede precedent permet d'acceder aux objets par les proprieties des noeuds, est certes elegant mais il faut bien 
admettre que les sauts successifs sur les elements d'un document XML produit un code complexe. II se revele en outre 
peu pratique dans le cas d'une mise a jour de la page car le moindre element ajoute ou retire necessiterait la 
reecriture complete du code. 

L'utilisation de la methode getEiementsByiagName se revele plus simple et plus fonctionnelle (chapitre Le DOM 
(Document Object Model) - Acceder aux noeuds). 

Considerons toujours notre document cesar2006.xml : il s'agit toujours d'acceder aux informations des balises <prix>, 

<nom> et <film> de la troisieme balise <categorie>. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<cinema> 

<evenement>Ceremonie des Cesars</evenement> 

<su jet>Palmares</su jet> 

<date>2006</date> 

<cesar> 

<categorie> 

<prix>Cesar du meilleur acteur</prix> 
<nom>Michel Bouquet</nom> 

<film>Le promeneur du Champ de Mars</film> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film f rancais</prix> 
<nom>Jacques Audiard</nom> 

<film>De battre mon coeur s'est arrete</f ilm> 

</categorie> 

<categorie> 

<prix>Cesar du meilleur film etranger</prix> 

<nom>Clint Eastwood</nom> 

<f ilm>Million dollar baby</film> 

</categorie> 

</cesar> 

</cinema> 



Construisons le script. 



<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function af f icher (xmldocument ) { 

noeudsprix = xmldocument . getEiementsByiagName ( "prix" ) ; 
noeudsnom = xmldocument . getEiementsByiagName ( "nom" ) ; 
noeudsfilm = xmldocument . getEiementsByiagName ( "film" ) ; 



} 



Les variables noeudsprix, noeudsnom et noeudsfilm contiennent dans une liste toutes les balises <prix>, <nom> et 
<fiim> du document XML. II suffit alors d'extraire la valeur (nodevaiue) du premier element enfant (firstchiid) du 
troisieme noeud <prix> (noeudsprix [2] ) . Bien entendu, les noeuds <nom> et <f iim> sont extraits de la meme fagon. Une 
fois ces informations recueillies, la propriete innerHTML permet I'affichage de celles-ci. 



function aff icher (xmldocument ) { 

noeudsprix = xmldocument . getEiementsByiagName ( "prix" ) ; 

noeudsnom = xmldocument . getEiementsByiagName ( "nom" ) ; 

noeudsfilm = xmldocument . getEiementsByiagName ( "film" ) ; 

var textediv = (noeudsprix [2] . f irstChild . nodeValue + "<br />" + 

noeudsnom [ 2 ]. firstchiid . node Value + "<br />" + 

noeudsfilm [ 2 ] . firstchiid. nodeValue) ; 

var target = document . getElementBy Id ( "aff ichage" ) ; 

target . innerHTML = textediv; 

} 



Le code complet du document Xhtml avec la methode getEiementsByiagName devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
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"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//<! [CD ATA [ 

function af f icher (xmldocument) { 

noeudsprix = xmldocument . getElementsByTagName ( "prix" ) ; 

noeudsnom = xmldocument . getElementsByTagName ( "nom" ) ; 

noeudsfilm = xmldocument . getElementsByTagName ( "film" ) ; 

var textediv = (noeudsprix [2] . f irstChild . nodeValue + "<br />" + 

noeudsnom [ 2 ]. firstChild . nodeValue + "<br />" + 

noeudsfilm [ 2 ] . firstChild. nodeValue) ; 

var target = document . getElementBy Id ( "affichage" ) ; 

target . innerHTML = textediv; 

} 

var xhr = null; 

function extraire() { 

if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ( "Votre<+>navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

aff icher (xmldocument) ; 

} 

} 

xhr .open ("GET", "cesar2006 . xml" , true); 

xhr . send (null ) ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<h2>Ceremonie des Cesars 2006</h2> 
<form action=""> 

<input type="button" value="Aff icher le Cesar" onclick="extraire ( ) " /> 
</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 



Le resultat est identique a celui de I'exploration du document par les proprietes des nceuds. 



Q Ce code avec la methode getElementsByTagName est parfaitement compatible pour Internet Explorer et Firefox. 



II vous est possible d'ajouter une feuille de style pour agrementer la presentation comme cela a ete realise aux points 
precedents. 



5. Traitement des attributs 

Un document XML peut egalement comporter des attributs de balises. Ceux-ci contiennent souvent des informations 
d'un interet non negligeable. Ainsi, il importe de pouvoir egalement y acceder. 
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Pour rappel (cf. chapitre Le DOM (Document Object Model) - Acceder aux attributs), nous utilisons la proprietearrr/dures 
qui renvoie une liste de tous les attributs d'un element specifie. Cette liste des nceuds attributs est renvoyee sous 
forme d'un objet de type NamedNodeMap. Ce qui implique que les attributs sont par la suite, accessibles par leur nom. 

Soit un document XML (stock. xml) qui comporte des attributs : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 

<stock> 

<album> 

<article="en stock ">10 01</article> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

</album> 

<album> 

<article etat="en stock">1002</article> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

</album> 

<album> 

<article etat="en rupture">1003</article> 
<titre>Sheller en solitaire</titre> 
<artiste>William Sheller</artiste> 
</album> 
<album> 

<article etat="en rupture">1004</article> 
<titre>Cache derriere</titre> 
<artiste>Laurent Voulzy</artiste> 
</album> 
<album> 

<article etat="en stock">1005</article> 
<t it re>Def oule sentimentale</t itre> 
<artiste>Alain Souchon</artiste> 
</album> 
</stock> 

On souhaite savoir, apres avoir consulte le fichier stock. xml, si I'article est en stock ou en rupture. 
Le fichier Xhtml de depart presente la forme suivante : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-885 9-1 " /> 
<meta http-equiv="Content-Style-Type" content="text/ javascript " /> 
</head> 
<body> 

<form action=""> 

Article : <input type="text" id="entree" size="4" /> 

<input type="button" value="Voir stock" onclick="extraire ( ) " /> 

<input type="reset" value="Annuler " /> 

</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 
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Passons a la partie script. 



<script type=' text/ JavaScript' > 




//<! [CDATA [ 




var xhr = null; 




function extraireO { 




if (window . XMLHttpRequest ) { 




xhr = new XMLHttpRequest () ; 
} 




else if (window . Act iveXObject ) { 




xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 




else { 




alert ("Votre navigateur n'est pas compatible avec AJAX. 
} 


■ ") ; 



Au die sur le bouton, la fonction extraire() est appelee. Elle cree un objet XMLHttpRequest ou un objet ActiveX pour 
rendre le script compatible. 



if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

af f icher (xmldocument) ; 

} 

} 

xhr .open ("GET", <+>" stock . xml " , true) ; 
xhr . send (null ) ; 



Une requete asynchrone est effectuee sur le fichier stock. xml. Si I'operation s'est deroulee correctement, le script passe 
la main a la fonction afficherQ prenant en argument le fichier XML (aff icher (xmldocument) ). 



function a f f i che r ( xmldocument ) { 

var entree = document . get E lementBy I d (" ent ree " ) .value; 

var target = do cument . get E 1 ement By I d ( " a f f i chage " ) ; 

var article = xml do cument .getElementsByTagName ("article") ; 



Differents objets sont alors determines. La variable entree reprend le contenu de la ligne de texte. La variable target 
accede a la zone d'affichage definie par la balise <div id="af fichage"> et enfin la variable article liste les balises 
<articie> du document XML. 



for (i=0; i<article. length; i++){ 

i f ( ar t i c 1 e [ i ] . f i r s t Chi Id . nodeValue = = ent ree ) { 

var attributs = article[i] .attributes; 

var et at s t ock=at t r ibut s . getNamedlt em ( " et at " ) .nodeValue; 

Ensuite, au moyen d'une boucle for, les differents elements de la liste article sont passes en revue. Si le numero de 
reference (articie[i]. firstchiid.nodevaiue) contenu dans la balise <articie> est egal a la valeur encodee 
(variable entree), une variable attributs est creee comprenant tous les attributs de la balise <articie> retenue. Enfin, 
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il suffit d'aller chercher I'attribut etat (attributs.getNameditemCetat") ) et d'en prendre la valeur (nodevaiue). 



target . innerHTML="Cet article est " + etatstock; 
1 

1 
} 

//] ] > 

</ script> 

Le script se termine par I'affichage du message. 
Le script complet est le suivant : 



<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function af f icher (xmldocument) { 

var entree = document . getElementByld ( "entree" ) .value; 

var target = document . getElementByld ( "affichage" ) ; 

var article = xmldocument . getElementsByTagName ( "article" ) ; 

for (i=0; i<article . length; i++) { 

if ( art icle [ i ] . f irstChild.nodeValue==entree) { 

var attributs=article [ i ] .attributes; 

var etatstock=attributs . getNamedltem ( "etat " ) .nodeValue; 

target . innerHTML="Cet article est " + etatstock; 

} 

> 

} 

var xhr = null; 

function extraire() { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", "stock. xml", true); 

xhr . send (null ) ; 

} 

} 

//}]> 
</script> 



Le fichier Xhtml final devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3 . org/TR/xhtml 1 /DTD/xhtml 1 -trans it ional .dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<script type=' text/ JavaScript' > 
//<! [CDATA [ 

function afficher (xmldocument) { 

var entree = document . getElementByld ( "entree" ) .value; 
var target = document . getElementByld ( "affichage" ) ; 
var article = xmldocument . getElementsByTagName ( "article" ) ; 
for (i=0; i<article . length; i++) { 
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if (art icle [ i ] . f irstChild.nodeValue==entree) { 
var attributs=article [ i ] .attributes; 

var etatstock=attributs . getNamedltem ( "etat " ) .nodeValue; 

target . innerHTML="Cet article est " + etatstock; 

} 

} 

} 

var xhr = null; 

function extraireO { 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument) ; 

} 

} 

xhr .open ("GET", "stock. xml", true); 

xhr . send (null ) ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<form action=""> 

Article : <input type="text" id="entree" size="4" /> 

<input type="button" value="Voir stock" onclick="extraire ( ) " /> 

<input type="reset" value="Annuler " /> 

</f orm> 

<div id="af f ichage"> 

La reponse ici ! 

</div> 

</body> 

</html> 
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Recuperer et traiter avec XSL 



Avec ce chapitre sur le traitement du XSL dans les applications AJAX, nous sommes a la limite du fonctionnement des 
navigateurs actuels et les solutions qu'ils proposent sont souvent specifiques et done hautement incompatibles. 

Nous avons etudie au chapitre Introduction au XSL la liaison d'une feuille de style XSL (fichier .xsl) dans un document 
XML (fichier .xml). 

Celle-ci se realisait par une ligne de code dans le fichier XML. Pour rappel : 

<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<?xml-stylesheet type="text/xsl" href ="xsldemo .xsl" ?> 

<compilation> 
<mp3> 

<titre>Sarbacane</titre> 

<artiste>Francis Cabrel</artiste> 

<date>1990</date> 

</mp3> 

Etc. 



Ce systeme, bien que tres puissant, ne prend cependant en charge que I'affichage du document XML dans un navigateur 
dont la vocation premiere est, rappelons-le, d'afficherdu Html ou du Xhtml. 

II faut, avec le modele AJAX, avoir la possibility d'acceder aux elements du fichier XML et XSL. Accessoirement, il faut 
aussi pouvoir changer de fagon dynamique (par le JavaScript), la feuille de style associee au document XML. 

II a fallu done mettre en place une technique differente de celle habituellement utilisee. C'est ce que nous allons aborder 
dans I'etude de ce sous-chapitre. 

Nous allons utiliser comme fichier XML (xml. xml), le code suivant, deja donne en exemple au chapitre Introduction au 
XSL . 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 

<compilation> 

<mp3> 

<titre>Sarbacane</titre> 

<art iste>Francis CabreK/art iste> 

<date>1990</date> 

</mp3> 

<mp3> 

<titre>Nickel</titre> 

<artiste>Alain Souchon</artiste> 

<date>199K/date> 

</mp3> 

<mp3> 

<titre>Sheller en solitaire</titre> 

<artiste>William Sheller</artiste> 

<date>1992</date> 

</mp3> 

<mp3> 

<titre>Cache derriere</titre> 

<artiste>Laurent Voulzy</artiste> 

<date>1993</date> 

</mp3> 

<mp3> 

<titre>Rio Grande</titre> 

<artiste>Eddy Mitchell</artiste> 

<date>1994</date> 

</mp3> 

<mp3> 

<titre>Samedi soir sur la Terre</titre> 

<artiste>Francis CabreK/art iste> 

<date>1995</date> 

</mp3> 

<mp3> 

<t it re>Def oule sent imentale</ tit re> 
<artiste>Alain Souchon</artiste> 
<date>1996</date> 
</mp3> 

</ compilation> 
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Et comme fichier de feuille de style XSL (fichier xsl.xsl) : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www. w3 . org/ 1 99 9 /XSL/ Trans f orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<table border="l" style="border-collapse : collapse" 

bordercolor="#0 00 00 0" cellpadding=" 3 " > 

<tr style="background: #9cf;"> 

<td>Annee</td> 

<td>Album</td> 

<td>Artiste</td> 

</tr> 

<xsl : f or-each select="compilation/mp3"> 
<tr> 

<td><xsl : value-of select="date" /></td> 
<td><xsl : value-of select = "titre"/x/td> 
<td><xsl : value-of select = "artiste"/x/td> 

</tr> 

</xsl : f or-each> 
</table> 
</body> 
</html> 

</xsl : template> 
</xsl : stylesheet> 



Q II faut remarquer qu'il n'y a pas de liaison entre le fichier XML et le fichier XSL. 



1. Solution pour Internet Explorer 7 

La demarche se realise toujours en trois etapes : 

■ Le chargement depuis le serveur du fichier XML. 

■ Le chargement depuis le serveur du fichier XSL. 

■ Le traitement pour associer le fichier XSL au fichier XML. 

Pour realiser le traitement, Microsoft s'est tourne vers les controles ActiveX de son moteur MSXML (voir chapitre L'objet 
XMLHttpRequest - Creer un objet XMLHttpRequest). 

Derivee de cette technologie, I'instruction xml.transformNode(xsl) permet d'associer de fagon dynamique, une feuille de 
style XSL a un document XML. II faut noter que ce code est specifique a Microsoft et ne repond en rien aux 
specifications du W3C. 

Depuis qu'Internet Explorer 7 admet egalement l'objet XMLHttpRequest de fagon native, un code peut etre elabore, 
proche de celui aborde aux points et chapitres precedents. 

Soit notre fichier Xhtml de depart : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
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<style type="text/css"> 
<! — 

♦transform {background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

</head> 

<body> 

<h2>XML et XSL</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 

onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 

</div> 

</body> 

</html> 



Commentaires 



Le script est appele au die sur le bouton du formulaire. 

Une declaration de feuilles de style (#transform) met en avant la zone definie par la balise <div 
id="transform"> . . . </div> dans laquelle se realise la transformation. 
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Passons au script et a son etude. 



<script type="text / javascript "> 
//<! [CD ATA [ 

var xml = loadXML ( ' xml . xml ' ) ; 
var xsl = loadXML ( ' xsl . xsl ' ) ; 



La fonction loadXMLQ est appelee une premiere fois pour charger le fichier XML ('xmi.xmi') et une seconde fois pour 
charger le fichier XSL ('xsl. xsl' ). 



function loadXML (url) { 
var xhr; 

xhr = new XMLHttpRequest ( ) ; 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

return xhr; 
} 
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La fonction loadXML(url) charge le fichier XML ou XSL de fagon asynchrone selon le code etudie precedemment. 

function t r an s f o rm ( xml , xsl, id) { 
if (window .ActiveXObject ) { 
var target = do cument . get E 1 ement By I d 
t a r ge t . i nne r HTML = xml . transf ormNode 
1 
} 

La fonction transform(), appelee au die du bouton, realise la troisieme etape en associant la feuille de style XSL au 
document XML (xml. transform-Node (xsl) ;). 

Le nouveau fichier ainsi obtenu est affiche (innerHTML) dans la balise <div id="transform"> par un appel a la methode 

get Element By Id. 

//] ] > 

</ script> 

Fin du script 

Le fichier Xhtml complet devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style type="text/css "> 

<! — 

♦transform (background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

< script type="text / javascript "> 
//<! [CDATA [ 

var xml = loadXML ( ' xml . xml ' ) ; 
var xsl = loadXML ( ' xsl . xsl ' ) ; 
function loadXML (url) ( 
var xhr; 

xhr = new XMLHttpRequest ( ) ; 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

return xhr; 
} 

function transf orm (xml, xsl, id) { 

if (window . Act iveXObject ) { 

var target = document . getElementBy Id ( id) ; 

target . innerHTML = xml . transf ormNode (xsl ) ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 
onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 
</div> 



(id) ; 
(xsl) ; 
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</body> 
</html> 
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2. Solution pour Internet Explorer 6 (et precedents) 

Cette solution se base uniquement sur des controles ActiveX du MSXML et de son compere XMLDOM. 

Ce code est compatible pour Internet Explorer 6, Internet Explorer 5.5, Internet Explorer 5 et meme pour internet 
Explorer 7. En effet, meme si ce dernier prend en charge I'objet XMLHttpRequest de fagon native, el reprend egalement 
le processus avec les controles ActiveX de ses predecesseurs. 

Ainsi, nous decouvons un code different de celui utilise jusqu'a present. 

Le fichier Xhtml de depart n'est que faiblement modifie : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style type="text/css "> 
<! — 

♦transform (background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

< script type="text / javascript "> 
//<! [CDATA [ 

var xml = loadXML ( ' xml . xml ' ) ; 
var xsl = loadXML ( ' xsl . xsl ' ) ; 
function loadXML (url) { 
var xhr; 

xhr = new XMLHttpRequest () ; 
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xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

return xhr; 
} 

function transform (xml, xsl, id) { 

if (window . Act iveXObject ) { 

var target = document . getElementBy Id ( id) ; 

target . innerHTML = xml . transf ormNode (xsl ) ; 

} 

} 

//] ]> 
</script> 
</head> 
<body> 

<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 

onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 

</div> 

</body> 

</html> 



En voici la capture d'ecran sous Internet Explorer 6. 
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Passons au script et a son etude. 

<script type = "text/ javascript "> 
//< ! [CDATA [ 

function t r an s f o rm ( i d ) { 

var xml = new Ac t i veXOb j e c t ( " Mi c r o s o f t . XMLDOM " ) ; 
xml.async = false; 
xml . load ( "xml . xml " ) ; 

Le COntrole ActiveX est initialise (new ActiveXOb ject ( "Microsoft . XMLDOM" ) ). 

Le mode synchrone generalement utilise est fixe (async = false). II semble cependant, selon la documentation de 
Microsoft, que le mode asynchrone pourrait etre adopte. Puis la methode load() prend en argument le fichier XML pour 
le charger (ioad("xmi.xmi") ). 

var xsl = new Ac t i veXOb j e c t ( " Mi c r o s o f t . XMLDOM " ) ; 
xsl. async = false; 
xsl . load ( "xsl .xsl" ) ; 

Le traitement du fichier XSL est identique. 
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var target = document . getElementByld (id) ; 
t a r ge t . i nne r HTML = xml . t r an s f o rmNode ( x s 1 ) ; 
1 

Le fichier XML est transforme a partir du fichier XSL (xml .transformNode (xsi) ) qui est affiche (innerHTML) dans la balise 

<div id="transf orm"> . . . </div>. 

//] ] > 

</ script> 

Fin de script. 

Le fichier Xhtml final devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3 . org/TR/xhtml 1 /DTD/xhtml 1 -trans it ional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style type="text/css "> 

<! — 

♦transform {background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

< script type="text / javascript "> 
//<! [CDATA [ 

function trans form ( id) { 

var xml = new ActiveXOb ject ( "Microsoft . XMLDOM" ) ; 
xml.async = false; 
xml . load ( "xml . xml" ) ; 

var xsl = new ActiveXOb ject ( "Microsoft . XMLDOM" ) ; 
xsl.async = false; 
xsl . load ( "xsl . xsl" ) ; 

var target = document . getElementByld ( id) ; 
target . innerHTML = xml . transformNode (xsl ) ; 
} 

//] ]> 
</script> 
</head> 
<body> 

<h2>Les victoires de la musique</h2> 
<div id="trans f orm" > 
<form action=""> 

<input type="button" value="Af f icher le palmares" 

onclick="transf orm ( ' transform' ) " /> 

</f orm> 

</div> 

</body> 

</html> 
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3. Solution pour Firefox 

Avec le navigateur Firefox (depuis la version Firefox 1.2), JavaScript peut executer des transformations XSLT a travers 
I 'o b j e tXSL TProcessor. 

Un fois I'objet XSLTProcessor cree, il faut utiliser la methode importstyiesheet (xsl) pour realiser la transformation. La 
feuille de style xsl doit etre chargee dans le document par I'objet XMLHttpRequest avant d'appeler la methode 
importstyiesheet o . Nous allons y revenir plus en detail dans la partie script. 

Voici le fichier Xhtml de depart (inchange) : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style type="text/css "> 
< ! — 

♦transform {background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

</head> 

<body> 

<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 

onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 

</div> 

</body> 

</html> 
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Le script devient : 

<script type=" text/ javascript "> 
//< ! [CDATA [ 

var xml = loadXML ( ' xml . xml' ) ; 
va r x s 1 = 1 oadXML ('xsl.xsl' ) ; 

Les deux fichiers XML et XSL sont charges en memoire en faisant appel a la fonction loadXML () . 



function loadXML (url) { 
var xhr; 

if (document . implementation . createDocument ) { 

xhr = new XMLHttpRequest)); 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

} 

return xhr; 
} 



La fonction loadXMLQ, apres avoir verifie si le navigateur utilise est bien Firefox (if 
(document. implementation. createDocument)) charge en mode svnchrone les fichiers a I'aide de I'objet XMLHttpRequest. 



function transform (xml, xsl, id) { 
if (window . XSLTProcessor) { 
var fragment; 

var xsltProcessor = new XSLTProcessor () ; 
xsltProcessor . importStylesheet (xsl) ; 



La fonction transform(), apres s'etre assure que I'objet XSLTProcessor est disponible (if (window. XSLTProcessor) ), 
cree une nouvelle instance de celui-ci (xsltProcessor = new XSLTProcessor o). Le fichier de style xsl est alors importe 

dans I'objet XSLTProcessor (xsltProcessor . import Style-sheet (xsl) ). 
fragment = xs ltP r oce s s o r . t r ans f o rmToFr agment ( xml , document); 

Pour que la transformation soit effective, XSLTProcessor doit executer la methode transformToDocument () qui retourne 
un document XML entier ou la methode transformToFragment () qui retourne un fragment de document pouvant etre 
facilement ajoute a un document XML existant. 

Nous retenons la methode transformToFragment o . Cette derniere qui prend les deux variables suivantes comme 
parametres : 

• le document XML a transformer , 

• I'objet document qui accueille le fragment genere. 
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La documentation de Firefox signale que si le fragment genere est insere dans le document HTML courant, le passage 
du parametre document est suffisant. Cette transformation permet d'extraire des donnees apres le chargement de la 
page, sans avoir a la rafraichir. 

var target = document . getElementByld (id) ; 

target. innerHTML=""; 

target . appendChi Id (fragment ) ; 

document . appendChi Id ( t ar get ) ; 

1 

1 

II est maintenant possible d'afficher le document XML transforme par la feuille de style XSL. 

La variable target repere la balise <div id="transform">, dont le contenu de celui-ci est efface (target. innerHTML=""). 
Le fichier XML transforme (variable fragment) est alors ajoute comme dernier enfant (appendchiid (fragment) ) a la 

variable target. Le tout est inclus dans le document COUrant (document . appendChild (target). 

//]}> 

< I script> 

Fin de script. 

Le fichier Xhtml final devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 
<style type="text/css "> 

<! — 

(transform {background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 

< script type="text / javascript "> 
//<! [CDATA [ 

var xml = loadXML ( ' xml . xml ' ) ; 
var xsl = loadXML (' xsl .xsl' ) ; 
function loadXML (url) { 
var xhr; 

if (document . implementation . createDocument ) { 

xhr = new XMLHttpRequest ( ) ; 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

} 

return xhr; 
} 

function transform (xml, xsl, id) { 
if (window . XSLTProcessor) { 
var fragment; 

var xsltProcessor = new XSLTProcessor () ; 
xsltProcessor . importStylesheet (xsl) ; 

fragment = xsltProcessor . transf ormToFragment (xml, document); 

var target = document . getElementByld ( id) ; 

target . innerHTML=" " ; 

target . appendChild ( fragment ) ; 

document . appendChild (target) ; 

} 

} 

//}}> 
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</script> 

</head> 

<body> 

<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 

onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 

</div> 

</body> 

</html> 
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4. Solution compatible 



II serait assez convivial d'avoir un script compatible, a la fois pour les navigateurs de la famille Internet Explorer et pour 
le navigateur Firefox. 

Le script suivant reprend le code elabore pour chacun d'eux aux points precedents. 
Le fichier Xhtml est inchange. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD/xhtml 1 -transitional . dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 
<style type="text/css"> 
<! — 

♦transform (background-color: #9cf; 
padding: lOpx; 
text-align: center;} 
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</style> 

</head> 

<body> 

<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 
<form action=""> 

<input type="button" value="Af f icher le palmares" 
onclick="transf orm (xml, xsl, 'transform')" /> 

</f orm> 
</div> 
</body> 
</html> 



Le script compatible devient : 



< script type="text / javascript "> 
//<! [CDATA [ 

var xml = loadXML ( ' xml . xml ' ) ; 
var xsl = loadXML (' xsl .xsl' ) ; 
function loadXML (url) { 
var xhr; 

// code pour Firefox 

if (document . implementation . createDocument ) { 

xhr = new XMLHttpRequest)); 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

} 

// code pour IE7 

else if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr . readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

} 

//code pour IE6, IE5.5 et IE5 
else if (window . Act iveXObject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLDOM" ) ; 
xhr.async = false; 
xhr . load (url) ; 
} 

return xhr; 
} 

function transform (xml, xsl, id) { 
if (window . XSLTProcessor) { 
var fragment; 

var xsltProcessor = new XSLTProcessor () ; 
xsltProcessor . importStylesheet (xsl) ; 

fragment = xsltProcessor . transf ormToFragment (xml, document); 

var target = document . getElementBy Id ( id) ; 

target . innerHTML=" " ; 

target . appendChild ( fragment ) ; 

document . appendChild (target) ; 

} 

else if (window . Act iveXOb ject ) { 

var target = document . getElementBy Id ( id) ; 

target . innerHTML = xml . transf ormNode (xsl ) ; 

} 

} 

//}]> 
</script> 
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5. Une application XSL dynamique 

Cette application permet de decouvrir qu'il est possible de changer dynamiquement la feuille de style d'un document 
XML pour la remplacer par une autre. 

Soit notre fichier XML (xml.xml), utilise tout au long de ce chapitre. Le fichier de style habituel (xsl.xsl) lui est associe 
dans un premier temps. Apres une action de I'utilisateur, le script transforme le fichier XML de depart avec une nouvelle 
feuille de style. 

Cette feuille de style (xsll.xsl), tiree du chapitre Introduction du XSL - Trier avec le langage XSL, permet de trier le 
dossier XML par ordre alphabetique. 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<xsl : stylesheet version=" 1 . 0 " 

xmlns :xsl="http : //www . w3 . org/1999/XSL/Transf orm"> 

<xsl : template match="/"> 

<html> 

<head> 

<title>XSL</title> 

</head> 

<body> 

<table border="l" style="border-collapse : collapse" 
bordercolor="#000000" bgcolor="#f f f f f f " cellpadding="3"> 
<tr> 

<td>Artiste</td> 
<td>Titre</td> 
<td>Annee</td> 
</tr> 

<xsl : for-each select="compilation/mp3"> 
<xsl:sort select="artiste" order="ascending" /> 
<tr> 
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<tdxxsl : value-of select="artiste"/x/td> 
<td><xsl : value-of select="titre"/x/td> 
<td><xsl : value-of select = "date"/x/td> 
</tr> 

</xsl : for-each> 
</table> 
</body> 
</html> 

< / x s 1 : t emp 1 at e > 
</xsl: styles heet> 



Le fichier Xhtml de depart est notre fichier usuel qui a cependant ete legerement modifie. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3 . org/TR/xhtml 1 /DTD/xhtml 1 -trans it ional .dtd"> 

<html xmlns="http: //www. w3.org/199 9/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 
<style type="text/css "> 

<! — 

♦transform {background-color: #9cf; 
padding: lOpx; 
text-align: center;} 

— > 

</style> 
</head> 

<body onload="init ( ' xml . xml' , 'xsl.xsl', 'transform' ) "> 
<h2>Les victoires de la musique</h2> 
<div id="transf orm"> 

</div> 

<form action="" style="text-align : center " > 
<input type="button" value="Trier par nom" 
onclick="init ( ' xml . xml' , 'xsll.xsl', 'transform')" /> 

</f orm> 
</body> 
</html> 



Ainsi, au chargement de la page (<body onioad="init o "), la fonction initQ est appelee avec, comme parametres, le 
fichier xml. xml, la feuille de style xsl.xsl et la zone de la page, identifiee par la balise <div id="transform">. 

Au die sur le bouton du formulaire, la meme fonction est declenchee mais cette fois avec comme parametre de la feuille 
de style, le fichier xsll.xsl. 
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f Ajax - Windows Internet Explorer 



▼ |g] http : //localhost/xsltf ir ^ *t /s 



Les victoires de la musique 



Annee 


Album 


Artiste 


1990 


Sarbacane 


Francis Cabrel 


1991 


Nickel 


Alain Souchon 


1992 


Sheller en solitaire 


William Sheller 


-003 


Cache derriere 


Laurent Youlzy 


1004 


Rio Grande 


Eddy Mitchell 


1995 


Samedi soir sur la Terre 


Francis Cabrel 


1996 


Defoule sentimentale 


Alain Souchon 



Trier par nom 



*j Intranet local 



^ 100% - 



Le script est lui aussi modifie afin de pouvoir tenir compte des adresses de fichiers, fournies en parametres de la 
fonction d'appel. 

Nous avons simplement ajoute au script, la fonction initQ qui charge les fichiers XML et XSL en fonction des adresses 
fournies en parametres (xmi = loadXML (urii) et xsl = loadXML (uri2) ). La fonction init() passe ensuite la main a la 
fonction transformQ. 



< script type= "text/ javascript "> 
//<! [CDATA [ 

function init(urll, url2,id){ 
var xml = loadXML (urll) , 
var xsl = loadXML (url2) , 
transform (xml, xsl, id), 
} 

function loadXML (url) { 
var xhr; 

// code pour Firefox 

if (document . implementation . createDocument ) { 

xhr = new XMLHttpRequest)); 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr .readyState == 4) { 

xhr = xhr . responseXML; 

} 

} 

// code pour IE7 

else if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

xhr . open (' GET' , url, false); 

xhr . send (null ) ; 

if (xhr .readyState == 4 ) { 

xhr = xhr . responseXML; 

} 

} 

//code pour IE6, IE5.5 et IE5 
else if (window . ActiveXOb ject ) { 

var xhr = new ActiveXOb ject ( "Microsoft . XMLDOM" ) , 
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xhr.async = false; 
xhr . load (ur 1 ) ; 
} 

return xhr; 
} 

function transform (xml, xsl, id) { 
if (window . XSLTProcessor) { 
var fragment; 

var xsltProcessor = new XSLTProcessor () ; 
xsltProcessor . importStylesheet (xsl) ; 

fragment = xsltProcessor . transf ormToFragment (xml, document); 

var target = document . getElementBy Id ( id) ; 

target . innerHTML=" " ; 

target . appendChild ( fragment ) ; 

document . appendChild (target) ; 

} 

else if (window . ActiveXOb ject ) { 

var target = document . getElementBy Id ( id) ; 

target . innerHTML = xml . transf ormNode (xsl ) ; 

} 

} 

//] ]> 
</script> 



Le resultat nous fournit le tableau trie par nom. 



0 Ajax - Windows Internet Explorer 




QK-"; 1 " r & http : //localhost/xsltf ir V 


B 


| X | Live Search 


ft & gAjax 




•sv » 





A 



Les victoires de la musique 



Artiste 


Titre 


Annee 


Alain Souchon 


Nickel 


1991 


Alain Souchon 


Defoule sentinientale 


1996 


Eddy Mitchell 


Rio Grande 


1994 


Francis Cabrel 


Sarbacane 


1990 


Francis Cabrel 


Samedi soir sur la Terre 


1995 


Laurent Youlzy 


Cache derriere 


1993 


William Sheller 


Shefler en solitaire 


1992 



V 

- Intranet local 100% * 
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Un carnet d'adresses 



Ce script propose une liste de selection avec plusieurs noms. Au die sur le bouton, les coordonnees de la personne sont 
affichees. 

Les informations relatives aux personnes sont presentes sur le serveur sous forme d'un fichier XML. 



3 Ajax - Microsoft Internet Explorer ED 19 



Fichier Edition Affichage Favoris Outils ? 
Qprecedente - Q - \*\ [£) ', 



: Adresse http://localhost/carnet.htm 



- 



Un carnet d' adresse en Ajax 



Termine 



Local intranet 



OK 



Choisissez une personne 


Faites votre choix v 


Coordonnees 






Chevalerin Vincent^ 
Clement Alex 
Lovisetti Stephane 
Souffre Jean 
Viviere Sylvain 



3 Ajax - Microsoft Internet Explorer ED@L^£ 



Fichier Edition Affichage Favoris Outils ? 
Q Precedente ' Q - £) gj \ 



Adresse ^ http://localhost/carnet.htm 



OK 



Un camet d'adresse en Ajax 

Choisissez une personne 



Chevalerin Vincent v [ Coordonnees 



NomPrenom : Chevalerin Vincent 

Adresse : 13, rue du Marechal Jqffre 

Ville : 59000 Lille 

Tel: +33-(0)-320219729 



H^) Termine 



'j Local intranet 



Pour rappel, tous les fichiers de ces exemples doivent etre situes sur le serveur local et sont accessibles dans le 
navigateur, par une adresse de type localhost/... 



Elaborons d'abord le fichier XML. Chaque contact du repertoire comporte les coordonnees suivantes : 
• Nom 
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• Prenom 



• Adresse 



• Code postal 

• Ville 

• Telephone 

La structure du fichier XML prend la forme suivante 

<carnet> 
<contact> 

<nom> < / nom> 

<prenomx/prenom> 

<adressex/adresse> 

<cp>< / cp> 

<villex/ville> 

<telx/tel> 
</contact> 
</ carnet> 

Le fichier XML (carnet.xml) propose est : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 

<carnet> 

<contact> 

<nom>Chevaler in</nom> 
<prenom>Vincent</prenom> 

<adresse>13, rue du Marechal Jof f re</adresse> 

<cp>59000</cp> 

<ville>Lille</ville> 

<tel>+33- (0) -32 021972 9</tel> 

</ contact> 

<contact> 

<nom>Clement</ nom> 
<prenom>Alex</prenom> 

<adresse>17, boulevard Jean Jaures</adresse> 

<cp>31000</cp> 

<ville>Toulouse</ville> 

<tel>+33- (0) -5 65 90 62 4 8</tel> 

</ contact> 

<contact> 

<nom>Lovisetti</nom> 
<prenom>Stephane</prenom> 

<adresse>9, avenue Poissonniere</adresse> 

<cp>75000</cp> 

<ville>Paris</ville> 

<tel> + 33- (0) -1734 0 954 0</tel> 

</ contact> 

<contact> 

<nom>Souf f re</ nom> 
<prenom> Jean</prenom> 

<adresse>12 1 , rue Robert Caumont</adresse> 

<cp>33000</cp> 

<ville>Bordeaux</ville> 

<tel>+33- (0) -55 60 02266</tel> 

</ contact> 

<contact> 

<nom>Viviere</ nom> 

<prenom>Sylvain</prenom> 

<adresse>64, rue des Sources</adresse> 

<cp>69000</cp> 

<ville>Lyon</ville> 

<tel>+33- (0) -4 7 83 83 899</tel> 
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</ contact> 
</ carnet> 



Passons maintenant au fichier Xhtml de depart : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 .org/TR/xhtmll /DTD /xhtml 1 -transitional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 

</head> 
<body> 

<h3>Un carnet d'adresse en Ajax</h3> 
<form action=""> 
<f ieldset> 

<legend>Choisissez une personne</legend> 
<select name="personnes " > 
<option>Faites votre choix</option> 
<option>Chevaler in Vincent </ opt ion> 
<option>Clement Alex</option> 
<option>Lovisetti Stephane</ option> 
<option>Souf f re Jean</option> 
<option>Viviere Sylvain</option> 
</ select> 

<input type="button" onclick="extraire (personnes) " 
value="Coordonnees" /> 
</f ieldset> 
</form> 

<div id="cadre" style="display : none; "> 

Norn Prenom : <span id=" idnom" ></ span>Snbsp; 

<span id="idprenom"x/span><br /> 

Adresse : <span id="idadresse"x/span><br /> 

Ville : <span id="idcp"x/span>  <span id="idville"x/span> 

<br /> 

Tel : <span id=" idtelephone"x/span> 

</div> 

</body> 

</html> 



Commentaires : 

• La liste de selection est introduite par la balise <seiect> ... </seiect>. 

• Les balises <fieidset> . . . </fieidset> et <iegend> . . . </iegend> sont des balises classiques en Html 4.1 et 
Xhtml 1.0 mais peu connues. El les permettent d'organiser la presentation des formulaires. 

• Le resultat s'affiche dans la zone <div id="cadre"> ... </div> qui, a I'ouverture de la page, est cachee 

(style="display :none; "). 

• Au die du bouton, la fonction extraire (personnes) permet de lancer le script. 
Abordons la partie JavaScript. 



<script type=' text/ JavaScript ' > 

//<! [CDATA [ 

var xhr = null; 

function extraire (personnes) { 

if (window. XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window. ActiveXOb ject ) { 

xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 
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else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 



Apres avoir initialise la variable xhr, elaborons le code de la fonction extraire () . Celle-ci est, pour rappel, appelee au die 
du bouton Coordonnees dans le fichier Xhtml. 

Les premieres lignes de script tiennent compte des differences de traitement d'une requete HTTP d'un navigateur a 
I'autre. Firefox et Internet Explorer 7 passent par I'objet JavaScript natif XMLHttpRequest, tandis qu'Internet Explorer 6 
et versions precedentes utilisent un controle ActiveX (voir chapitre L'objet XMLHttpRequest - Creer un objet 
XMLHttpRequest). 



if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument, personnes) ; 

} 

} 

xhr .open ("GET", " carnet . xml " , true); 

xhr . send (null ) ; 

} 

} 



Apres s'etre assure que l'objet xhr existe bien (if (xhr)), une requete est mise en place selon la methode GET, vers le 
fichier carnet. xml et selon un mode asynchrone. La requete est alors effectivement executee lors de I'instruction 

xhr . send (null ) . 

La bonne execution de cette requete HTTP est surveillee en fonction des informations retournees sur ses propres 
changements d'etat, soit par (onreadystatechange). L'assurance que la requete a bien abouti est obtenu a deux 
conditions : d'une part, les donnees sont accessibles (readyState == 4) d'autre part le code numerique de la reponse du 
serveur est satisfaisant (status == 200). Le fichier est alors retourne sous la forme d'un document XML 
(xhr. responseXML). Ce dernier est stocke dans la variable xmldocument. Le fichier XML peut maintenant etre traite par le 
JavaScript du navigateur par la fonction afficher(). Le fichier XML (xmldocument) et les donnees du menu deroulant 
(personnes) sont fournis comme arguments de la fonction. 

function a f f i che r ( xml do cumen t , pe r s onne s ) { 

La fonction afficher 0 se charge de recuperer les differentes coordonnees (nom, prenom, adresse, etc) de la personne 
selectionnee et d'afficher le resultat dans la page Xhtml. 



var ordre = (personnes . selectedlndex - 1); 
if (ordre!= -1) { 

var affichage= document . getElementByld ( "cadre" ) ; 
aff ichage . style . display = 'block' 



II importe de connaitre la personne retenue par I'utilisateur dans le menu deroulant. C'est le role de selectedlndex. Sa 
valeur est stockee dans la variable ordre. La premiere option du menu etant le texte "Faites votre choix", il faut prendre 
la precaution de diminuer cet index d'une unite (selectedlndex - 1). Tout affichage est exclu si cette valeur est negative 
(if(ordre!= -i)). Le contenu de la balise <div id="cadre"> ... </div> devient apparent a ce stade du processus 
(style. display = 'block') sachant q u 'il est cache dans le fichier Xhtml initial. 



nouedsnom = xmldocument . getElementsByTagName ( "nom" ) ; 
noeudsprenom = xmldocument . getElementsByTagName ( "prenom" ) ; 
noeudsadresse = xmldocument . getElementsByTagName ( "adresse" ) ; 
nouedscp = xmldocument . getElementsByTagName ( "cp" ) ; 
noeudsville = xmldocument . getElementsByTagName ( "ville" ) ; 
noeudstel = xmldocument . getElementsByTagName ( "tel" ) ; 



Les differentes balises (ex : <nom>) du fichier XML sont recuperees dans une liste (ex : noeuds.nom) grace a la methode 

getElementsByTagName. Les balises SUivanteS SOnt traitees de la meme fagon : <prenom>, <adresse>, <cp>, <ville> et 
<telephone>. 



var textenom = nouedsnom [ ordre ] . f irstChild. nodeValue; 

var texteprenom = noeudsprenom [ordre] . f irstChild. nodeValue; 

var texteadresse = noeudsadresse [ordre] . firstChild. nodeValue; 

var textecp = nouedscp [ordre] . firstChild. nodeValue; 

var texteville = noeudsville [ordre] . firstChild. nodeValue; 

var textetel = noeudstel [ordre] . firstChild. nodeValue; 
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II faut maintenant atteindre le texte associe a la balise <nom> pour le contact selectionne. Cette balise est determinee 
par son numero d'ordre du contact dans le menu deroulant (la variable ordre), associe a la liste noeudsnom. Dans 
I'arborescence du fichier XML, le nom du contact est le premier enfant de la balise <nom> (firstchiid) dont la valeur de ce 
nceud texte est obtenue par la propriete nodeValue, et ainsi de suite pour les autres valeurs. 



var targetnom = document . getElementBy Id (" idnom" ) ; 

var targetprenom = document . getElementByld (" idprenom" ) ; 

var targetrue = document . getElementByld ( "idadresse" ) ; 

var targetcp = document . getElementByld (" idcp" ) ; 

var targetville = document . getElementBy Id (" idville ") ; 

var targettelephone = document . getElementByld (" idtelephone" ) ; 

targetnom. innerHTML = textenom; 

targetprenom. innerHTML = texteprenom; 

targetrue . innerHTML = texteadresse; 

targetcp . innerHTML = textecp; 

targetville . innerHTML = texteville; 

targettelephone . innerHTML = textetel; 

} 

} 



La variable targetnom repere la balise <span id="idnom"> . . . </span> du document Xhtml, par son identifiant id 
(getElementByld ("idnom") ;) . Le contenu de la balise <span> est modifie par la propriete innerHTML 
(targetnom. innerHTML) en fonction des informations recueillies par la variable textenom. 

//}}> 

</ script> 

Le script est termine. 

Sachant que la fonction afficher() doit etre disponible avant la fonction extraire(), le script complet devient : 

<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

function af f icher (xmldocument , personnes ) { 
var ordre = (personnes . selectedlndex - 1); 
if (ordre!= -1) { 

var affichage= document . getElementByld ( "cadre" ) ; 
aff ichage . style . display = 'block' 

nouedsnom = xmldocument . getElementsByTagName ( "nom" ) ; 

noeudsprenom = xmldocument . getElementsByTagName ( "prenom" ) ; 

noeudsadresse = xmldocument . getElementsByTagName ( "adresse" ) ; 

nouedscp = xmldocument . getElementsByTagName ( "cp" ) ; 

noeudsville = xmldocument . getElementsByTagName ( "ville" ) ; 

noeudstel = xmldocument . getElementsByTagName ( "tel" ) ; 

var textenom = nouedsnom [ordre] . firstchiid. nodeValue; 

var texteprenom = noeudsprenom [ ordre ]. firstchiid . nodeValue ; 

var texteadresse = noeudsadresse [ordre] . firstchiid. nodeValue; 

var textecp = nouedscp [ordre] . firstchiid. nodeValue; 

var texteville = noeudsville [ordre] . firstchiid. nodeValue; 

var textetel = noeudstel [ordre] . firstchiid. nodeValue; 

var targetnom = document . getElementBy Id (" idnom" ) ; 

var targetprenom = document . getElementByld (" idprenom" ) ; 

var targetrue = document . getElementByld ( "idadresse" ) ; 

var targetcp = document . getElementByld (" idcp" ) ; 

var targetville = document . getElementByld ( "idville" ) ; 

var targettelephone = document . getElementByld (" idtelephone" ) ; 

targetnom. innerHTML = textenom; 

targetprenom. innerHTML = texteprenom; 

targetrue . innerHTML = texteadresse; 

targetcp . innerHTML = textecp; 

targetville . innerHTML = texteville; 

targettelephone . innerHTML = textetel; 

} 

} 

var xhr = null; 

function extraire (personnes) { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 
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else if (window. ActiveXOb ject) { 

xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX. 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument, personnes) ; 



xhr . open ( "GET" , " carnet . xml " , true), 

xhr . send (null ) ; 

} 

} 

//] ]> 

</ script> 



Voici le resultat dans un navigateur 



3 Ajax - Microsoft Internet Explorer 



Fichier Edition Affichage Favoris Outils ? 
Q Precedent - Q - \*\ \£\ \ 



Adresse http://localhost7carnet.htm 



OK 



Un camet d' adresse en Ajax 



Choisissez une personne 
Souffre Jean v [ (~ CoordonneeT 



mm 



Nom Prenom : Souffre Jean 
Adresse : 121, rue Robert Caumont 
Ville : 33000 Bordeaux 
Tel : +33-(0)-556002266 



^} Termine 



*j Local intranet 



Agrementons le fichier Xhtml de quelques declarations de style pour en ameliorer la presentation. 

<style type="text/css"> 

#cadre { 

width: 250px; 

height: 80px; 

margin-left: lOpx; 

padding: 5px; 

border: solid black lpx; 

background-color: #9cf; 

} 

#idnom, tidprenom { 
font-family: sans-serif; 
font-weight: bold; 
font-size: llpt; 
} 

#idadresse { 
font-style: italic; 
} 

tidtelephone { 
font-weight: bold; 
font-family: monospace; 
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} 

</style> 



Commentaires : 

• Les differentes coordonnees (<div id="cadre") sont affichees dans une boite dotee d'une fine bordure et d'un 
arriere-plan de couleur. Ce dernier met en avant le resultat du script. 

• Le nom et le prenom (<span id="idnom"> et <span id="idprenom">) sont affiches en gras. 

• L'adresse (<span id="idadresse">) est mise en lettres italiques. 

• Le telephone (<span id="idteiephone">) est presente selon une police a chasse fixe. 
Le fichier Xhtml complet, avec le script et les feuilles de style devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www. w3 .org/TR/xhtmll /DTD /xhtml 1 -trans it ional .dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

function af f icher (xmldocument , per sonnes ) { 
var ordre = (personnes . selectedlndex - 1) ; 
if (ordre!= -1) { 

var affichage= document . getElementByld ( "cadre" ) ; 
aff ichage . style . display = 'block' 

nouedsnom = xmldocument . getElementsByTagName ( "nom" ) ; 

noeudsprenom = xmldocument . getElementsByTagName ( "prenom" ) ; 

noeudsadresse = xmldocument . getElementsByTagName ( "adresse" ) ; 

nouedscp = xmldocument . getElementsByTagName ( "cp" ) ; 

noeudsville = xmldocument . getElementsByTagName ( "ville" ) ; 

noeudstel = xmldocument . getElementsByTagName ( "tel" ) ; 

var textenom = nouedsnom [ ordre ] . f irstChild. nodeValue; 

var texteprenom = noeudsprenom [ ordre ]. f irstChild . nodeValue ; 

var texteadresse = noeudsadresse [ordre] . f irstChild. nodeValue; 

var textecp = nouedscp [ordre] . f irstChild. nodeValue; 

var texteville = noeudsville [ordre] . f irstChild. nodeValue; 

var textetel = noeudstel [ordre] . f irstChild. nodeValue; 

var targetnom = document . getElementByld (" idnom" ) ; 

var targetprenom = document . getElementByld (" idprenom" ) ; 

var targetrue = document . getElementByld ( "idadresse" ) ; 

var targetcp = document . getElementByld (" idcp" ) ; 

var targetville = document . getElementByld ( "idville" ) ; 

var targettelephone = document . getElementByld (" idtelephone" ) ; 

targetnom . innerHTML = textenom; 

targetprenom. innerHTML = texteprenom; 

targetrue . innerHTML = texteadresse; 

targetcp . innerHTML = textecp; 

targetville . innerHTML = texteville; 

targettelephone . innerHTML = textetel; 

} 

} 

var xhr = null; 

function extraire (personnes ) { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . Act iveXObject ) { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

else { 
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alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if(xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

afficher (xmldocument, personnes) ; 

} 

} 

xhr .open ("GET", " carnet . xml " , true); 

xhr . send (null ) ; 

} 

} 

//]]> 

</ script> 

<style> 

#cadre { 

width: 250px; 

height: 80px; 

margin-left: lOpx; 

padding: 5px; 

border: solid black lpx; 

background-color: #9cf; 

} 

#idnom, lidprenom { 
font-family: sans-serif; 
font-weight: bold; 
font-size: llpt; 
} 

#idadresse { 
font-style: italic; 
} 

#idtelephone { 
font-weight: bold; 
font-family: monospace; 
} 

</style> 

</head> 

<body> 

<h3>Un carnet d'adresse en Ajax</h3> 
<form action=""> 
<f ieldset> 

<legend>Choisissez une personne</legend> 
<select name="personnes " > 
<option>Faites votre choix</option> 
<option>Chevaler in Vincent</ option> 
<option>Clement Alex</option> 
<option>Lovisetti Stephane</ option> 
<option>Souf f re Jean</option> 
<option>Viviere Sylvain</option> 
</ select> 

<input type="button" onclick="extraire (personnes) " 
value="Coordonnees" /> 
</f ieldset> 
</form> 

<div id="cadre" style="display : none; "> 

Nom Prenom : <span id=" idnom" ></ span>  <span id="idprenom"x/span> 

<br /> 

Adresse : <span id="idadresse"x/span><br /> 

Ville : <span id="idcp"x/span>  <span id="idville"x/spanxbr /> 

Tel : <span id=" idtelephone " ></span> 

</div> 

</body> 

</html> 
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3 Ajax - Microsoft Internet Explorer 




Fichier Edition Affichage Favoris Outils 


? 9 


i Q Precedents ' © " 0 3 C 




Adresse |g] http://localhost/carnet.htm 





Un caniet <!' adresse en Ajax 

Choisissez une personne 



Chevalerin Vincent 


V 


Coordonnees 





NomPrenom : Chevalerin Vincent 

Adresse : 13, rue du Marechal Jojfre 

Vie : 59000 Lille 

Tel: +33-<0)-320219729 



^] Termine 



*>j Local intranet 



Q Le script de cet exemple est compatible entre Internet Explorer et Firefox. 
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Suggestion d'encodage 



La philosophie de cet exemple est de presenter, en cours de saisie de donnees, au clavier par I'utilisateur des 
suggestions de valeurs. 

Soit une page Web dans laquelle le visiteur peut saisir le nom de son departement. 



Script Ajax - Windows Internet E... f^~] fP~ | [ X 



HL, http://localhost/depaf v +f X Li 



! Script Ajax 



Departement 



* § Intranet local 



\ 100% 



A la saisie clavier de la lettre "L", diverses propositions sont affichees dans un menu deroulant, soit tous les 
departements commengant par la lettre L : Landes, Loir-et-Cher, Loire, Loire-Atlantique, Loiret, Lot, Lot-et-Garonne, 
Lozere. 



£ Script Ajax - Windows Internet E... |T]f6]fx' 



▼ |fc http://localhost/depar v 



\*t\ X 



Live 



^ Script Ajax 



Departement : 


L| 


Loir-et-Cher 




Loire 




Loire-Atlantique 




Loiret 




Lot 




Lot-et-Garonne 




Lozere 





v 

* J Intranet local + s 100% ' 



L'utilisateur poursuit la saisie et tape la lettre "o". Le menu deroulant ne presente alors que les departements 
commengant par "Lo" et ce instantanement, sans que la page soit rechargee. 
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£2 Script Ajax - Windows Internet E... Q@@ 



- |gj http;//localhost/depatgj \*t , ~ 



& <& g£ Script Ajax 



Departement : 


Lo| 


Loir-et-Cher 




Loire 




Loire-Atlantique 




Loiret 




Lot 




Lot-et -Garonne 




Lozere 





* I Intranet local 



\ 100% 



Continuons avec la saisie de la lettre "i". Une nouvelle modification du menu deroulant fait apparaitre les departements 
commengant par les lettres "Loi" (Loir-et-Cher, Loire, Loire-Atlantique et Loiret). 



Script Ajax - Windows Internet E... (3(5 



' |<g] http://localhost/depar v | ♦* X 
^ Script Ajax 'i 



Departement : 


Loi 


Loir-et-Cher 




Loire 


Loire-Atlantique 


Loiret 



* I Intranet local 



, 100% 



Supposons qu'a ce stade, le departement de la Loire-Atlantique est retenu. 



^ Script Ajax - Windows Internet E... 



je, http://localhost/depar v *t a 



Script Ajax 



Departement : 


Loi 


Loir-et-Cher 




Loire 




Loire-Atlantique 


> 


Loiret 



*J Intranet local 



a 



, 100% 
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II suffit alors de cliquer sur le departement de la Loire-Atlantique pour que celui-ci s'affiche automatiquement dans la 
zone de texte, en faisant disparaitre dans le meme temps, la liste deroulante. 



£ Script Ajax - Windows Internet E... X 


~ gj http://localhost/depaf v + t X 




& ^Script Ajax m ' 


Departement : 


V 


Loire-Atlantique 




* J Intranet local \ 100% ' 



Cet exemple s'inspire directement de Google Suggest (labs.google.com/suggest/) qui suggere les 10 mots-cles les plus 
pertinents pour une recherche avec le nombre de pages se referant a des mots-cles (voir chapitre Presentation generale 
d'AJAX, Exemples sur le web). 

Go oak 

Suggest <C^ labs 



Web Images Video News Maps more » 



Ajax 


ajax tutorial 


25.800.000 results 


ajax tutorials 


51.400.000 results 


ajax examples 


3.790.000 results 


ajaxian 


2.230.000 results 


ajax framework 


33.900.000 results 


ajax php 


138.000.000 results 


ajax example 


17.800.000 results 


ajax4jsf 


199.000 results 


ajax asp net 


9.170.000 results 


ajax amsterdam 


3.530.000 results 



C\ Cet exemple illustre parfaitement I'apport du Web 2.0 et du concept AJAX, dans le but de faciliter I'utilisation 
" quotidienne du Web ainsi que le confort d'utilisation. 



Au niveau du code, ce script comporte dans son ensemble : 

• Un fichier XML, situe sur le serveur, qui reprend la liste des departements. 

• Un fichier Xhtml avec, dans le cas present, une simple ligne de texte. 

• Un fichier JavaScript externe qui, apres avoir recupere la ou les lettre(s) saisies dans la zone de texte, execute 
une requete HTTP pour interroger le fichier XML, recupere les departements correspondants et les affiche sous la 
forme d'un menu popup deroulant. 

• Un fichier de feuilles de style CSS externe prenant en charge la presentation du menu deroulant. 

Commengons par le fichier XML (departements. xml). 
L'arborescence de ce fichier se presente comme suit : 
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• L'element racine du document est la balise <choix> . . . </choix>. 



• Pour chaque departement, une balise <item> est prevue. 



• Chaque item contient la balise <dep> ... </dep> pour le nom du departement et la balise <vaieur> ... 
</vaieur> pour le numero qui lui est associe. 



<choix> 
<item> 
<dep> . . . 
<valeur > 
< / i t em> 
< / cho ix> 



</dep> 
, . . </valeur> 



Ce fichier, disponible dans I'espace de telechargement, se presente comme suit : 



<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<choix xml : lang="FR"> 

<itemxdep>Ain</ dep><valeur>OK/valeurx/item> 
<item><dep>Aisne</dep><valeur>02</valeur></ item> 
<itemxdep>Allier</ dep><valeur>0 3</valeur></ item> 

<itemxdep>Alpes-de-Haute-Provence</dep><valeur>0 4 </valeur></ item> 
<itemxdep>Hautes-Alpes</dep><valeur>05</valeurx/ item> 
<itemxdep>Alpes-Maritimes</dep><valeur>0 6</valeurx/item> 
<itemxdep>Ardeche</depxvaleur>07</valeur></ item> 
<item><dep>Ardennes</ dep><valeur>0 8</valeurx/item> 
<itemxdep>Ar iege</ dep><valeur>0 9</valeur></ item> 
<itemxdep>Aube</depXvaleur>10</valeur></ item> 
<itemxdep>Aude</depXvaleur>l K/valeur></ item> 
<itemxdep>Aveyron</depxvaleur>12</valeur></ item> 
<item><dep>Bouches-du-Rhone</depxvaleur>l 3</valeur></ item> 
<itemxdep>Calvados</ dep><valeur>14</valeurx/item> 
<itemxdep>Cantal</ dep><valeur>l 5</valeurx/item> 
<itemxdep>Charente</ dep><valeur>l 6</ valeur ></item> 
<itemxdep>Charente-Maritime</dep><valeur>17</valeur></ item> 
<itemxdep>Cher</dep><valeur>18</valeurx/ item> 
<itemxdep>Correze< /depx valeur >1 9</ valeurx/ item> 
<itemxdep>C6te-d' Or</dep><valeur>2K/valeurx/ item> 
<item><dep>C6tes-d' Armor </ dep><valeur>22 </ valeur ></ it em> 
<item><dep>Creuse</ dep><valeur>2 3</ valeur ></ item> 
<item><dep>Dordogne</ dep><valeur>2 4 </ valeur ></item> 
<itemxdep>Doubs</dep><valeur>25</ valeur ></ item> 
<itemxdep>Dr6me</dep><valeur>2 6</ valeur ></ item> 
<itemxdep>Eure</dep><valeur>2 7</valeur></ item> 
<itemxdep>Eure-et-Loir </dep><valeur>2 8</valeur></ item> 
<itemxdep>Finistere</dep><valeur>2 9</ valeur ></ item> 
<itemxdep>Corse-du-Sud</dep><valeur> 2 A</ valeur ></ item> 
<itemxdep>Haute-Cor se</depxvaleur>2B< /valeur ></ item> 
<itemxdep>Gard</dep><valeur>30</valeurx/ item> 
<itemxdep>Gers</dep><valeur>3 1</ valeur ></ item> 
<itemxdep>Gironde</dep><valeur>33</valeurx/ item> 
<itemxdep>Herault</depxvaleur>34</valeur></ item> 
<itemxdep>Ille-et-Vilaine</ dep><valeur>35</ valeur ></ it em> 
<item><dep> Indre</dep><valeur> 3 6</ valeur ></ item> 
<itemxdep>Indre-et-Loire< /depx valeur >3 7 </ valeurx/ item> 
<item><dep> Isere</dep><valeur>3 8</valeur></ item> 
<item><dep> Jura</dep>< valeur > 3 9</ valeur ></ item> 
<item><dep>Landes</ dep><valeur>4 0</ valeur ></ item> 
<itemxdep>Loir-et-Cher</depXvaleur>4 1</ valeur ></ item> 
<itemxdep>Loire</dep><valeur>4 2</valeur></ item> 
<itemxdep>Haute-Loire</dep><valeur>4 3</ valeurx/ item> 
<itemxdep>Loire-Atlantique</dep><valeur>4 4</valeurx/ item> 
<itemxdep>Loiret </ dep><valeur>4 5</valeurx/item> 
<item><dep>Lot</ depx valeur > 4 6</ valeurx /it em> 
<itemxdep>Lot-et-Garonne</depxvaleur>4 7</valeurx/ item> 
<itemxdep>Lozere</ depx valeur > 4 8</valeurx/item> 
<item><dep>Maine-et-Loi re</dep>< valeur > 4 9</ valeurx/ item> 
<item><dep>Manche</ dep><valeur>50</valeur></ item> 
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<item><dep>Marne</dep><valeur>51</valeurx/item> 
<itemxdep>Haute-Marne</dep><valeur>52</ valeurx/ item> 
<itemxdep>Mayenne</depxvaleur>53</valeur></ item> 
<itemxdep>Meurthe-et-Moselle</ dep><valeur>54</valeurx/item> 
<itemxdep>Meuse</dep><valeur> 5 5< /valeurx/ item> 
<itemxdep>Morbihan</ dep><valeur>5 6</ valeur ></item> 
<itemxdep>Moselle</dep><valeur>57</valeur></ item> 
<itemxdep>Nievre</ dep><valeur>58< /valeurx/ it em> 
<itemxdep>Nord</dep><valeur>5 9</valeurx/item> 
<item><dep>Oise</depxvaleur>60</valeur></ item> 
<itemxdep>Orne</dep>< valeur > 61</valeur></ item> 
<itemxdep>Pas-de-Calais</ dep><valeur> 62 </ valeurx/ it em> 
<item><dep>Puy-de-D6me</dep><valeur>63</valeurx/item> 
<itemxdep>Pyrenees-Atlant iques</depxvaleur>64 </ valeur ></item> 
<itemxdep>Hautes-Pyrenees</ dep><valeur> 65</ valeurx /it em> 
<itemxdep>Pyrenees-Orientales</dep><valeur> 6 6</ valeurx/ item> 
<itemxdep>Bas-Rhin</ dep><valeur>67</valeurx/item> 
<itemxdep>Haut-Rhin</depxvaleur> 68 < /valeurx/ item> 
<itemxdep>Rh6ne</dep><valeur> 6 9</ valeurx/ item> 
<itemxdep>Haute-Sa6ne</dep><valeur>7 0</valeurx/item> 
<itemxdep>Saone-et-Loire</depx valeur > 7 1</ valeurx/ item> 
<itemxdep>Sarthe</ dep><valeur>72</valeurx/item> 
<itemxdep>Savoie</ depx valeur > 7 3</valeur>< / item> 
<itemxdep>Haute-Savoie</depxvaleur>74</valeur></ item> 
<itemxdep>Paris< /dep><valeur> 7 5</ valeurx/ item> 
<item><dep>Seine-Marit ime</dep>< valeur > 7 6</ valeurx/ item> 
<it emxdep>Seine-et -Mar ne</ depx valeur >7 7 </ valeurx/ item> 
<item><dep>Yvelines</ dep><valeur>7 8</ valeur ></item> 
<itemxdep>Deux-Sevres</depxvaleur>7 9< /valeurx / item> 
<itemxdep>Somme</dep><valeur>8 0</valeur></ item> 
<itemxdep>Tarn</depxvaleur>81</valeurx/ item> 
<itemxdep>Tarn-et-Garonne</ dep><valeur>82</valeurx/item> 
<itemxdep>Var</dep><valeur> 8 3</ valeurx/ it em> 
<item><dep>Vaucluse</ dep><valeur>8 4</valeurx/item> 
<itemxdep>Vendee</ depx valeur > 8 5< /valeurx /item> 
<itemxdep>Vienne</ depx valeur > 8 6</ valeurx /it em> 
<item><dep>Haute-Vienne</depxvaleur>87</valeur></ item> 
<itemxdep>Vosges</ dep><valeur>88< /valeurx/ it em> 
<item><dep> Yonne< /depx valeur > 8 9</ valeurx/ item> 

<item><dep>Terr it oi re-de-Bel f ort</dep><valeur>90</valeur></ item> 
<item><dep>Essonne</depxvaleur>91</valeur></ item> 
<item><dep>Haut s-de-Seine< /depx valeur > 92 </ valeurx/ item> 
<item><dep> Seine- Saint -Denis </dep><valeur>93</ valeurx/ item> 
<itemxdep>Val-de-Marne</dep><valeur> 94 </ valeurx/ it em> 
<itemxdep>Val-d' Oise</ dep><valeur>95< /valeurx/ it em> 
</ choix> 



Le fichier Xhtml (departement.htm) est assez sommaire. II comporte un formulaire avec comme unique element une ligne 
de texte et un element <div> ... </div> identifiee par id="popups". 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Script Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 

<meta http-equiv="Content-Style-Type" content="text/css " /> 

<link rel=" stylesheet " rev=" stylesheet " href ="departements . ess " /> 

<script src="departements . js" type="text/ javascript"> 

</ script> 

</head> 

<body> 

<form action=""> 
Departement : <br /> 

<input type="text" id="formulaire" /xbr /> 

<div id="popups"> </div> 

</form> 
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</body> 
</html> 



Le fichier JavaScript est plus complexe a cause de la multiplicity des taches qu'il doit gerer. Voici le code pas a pas de ce 
fichier : 

windo w . on 1 o ad = initAll; 
var xhr = null; 

var departements = new Array (); 

Comme il s'agit d'un fichier JavaScript externe, on initialise la fonction initAll o au chargement de la page (onload). 
Apres la declaration de la variable xhr, un tableau est cree (newArray ( ) ) afin d'y inserer les differents departements. 

function initAll () { 

document . getElementByld ( "f ormulaire" ) . onkeyup = s e a r chS ugge s t ; 

La fonction initAiio recupere d'abord I'action de I'utilisateur dans la ligne de texte du formulaire (getElementByld 
("formuiaire") ) .L'evenement associe a celle-ci est de type onkeyup. Ainsi a chaque lettre saisie, la fonction 
searchsuggest o sera appelee (voir plus loin dans le script). 

Une requete HTTP peut alors etre lancee sur le serveur. 



if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 
} 

} 



Comme nous I'avons vu au chapitre L'objet XMLHttpRequest - Creer un objet XMLHttpRequest , ce bout de script est 
destine a distinguer les procedures differentes mises en ceuvre pour Internet Explorer 7 et Firefox (xhr = new 
XMLHttpRequest o ;) et Internet Explorer 6 ou versions anterieures pour lesquelles un controle ActiveX est encore utilise 

(xhr = new Act iveX-Ob ject ( "Microsoft . XMLHTTP ");) . 



if (xhr) { 

xhr . onreadystatechange = setdepartements; 
xhr . open ( "GET" , "departements . xml " , true) ; 
xhr . send (null ) ; 
} 

else { 

alert ( "Desole, votre navigateur n'est pas compatible avec AJAX"); 

} 

} 



Si l'objet xhr a bien ete cree (if (xhr)), la requete est initialisee selon la methode GET, pour lire le fichier 
departements. xml en mode asynchrone. La requete est ensuite effectuee par I'instruction send (null). Des qu'il y a des 
changements d'etat de la requete (onreadystatechange), la fonction setdepartements o est appelee. 

function setdepartements)) { 
if ( xhr . ready State == 4) { 
if (xhr. status == 200) { 

Cette fonction setdepartements!) teste d'abord si les donnees retournees sont completement accessibles 

(xhr.readystate == 4) puis si la requete a ete executee avec succes (xhr. status == 200). 

if ( xh r . r e spon s eXML ) { 

var tousdepartements = xhr. r e spon s eXML .getElementsByTagName ("item") ; 

Si l'objet xhr.responseXML existe, la variable tousdepartements contient, sous forme d'un document XML, toutes les 
balises <item> du fichier, repertories grace au nom de la balise (getElementsByTagName ("item") ) . 



for (var i=0; i<tousdepartements . length; i++) { 
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departements [ i ] = tousdepartements [ i] . getElementsByTagName ( "dep" ) [0] . f irstChild; 

} 

} 

} 

else { 

alert ("II y a un probleme avec la requete " + xhr. status); 

} 

> 

} 



Par une bOUCle for, Chaque item va etre parcouru un a un (tousdepartements [i] ). La balise <dep> (getElementsByTagName 

("dep") [0] ) est identifee et son premier enfant est memorise, soit le noeud texte contenant le nom du departement. Ce 
nom est stocke dans le tableau departements. 

Les donnees du document XML ayant ainsi ete recuperees, la fonction searchsuggest o va a present les traiter. 

function s e a r ch S ugge s t ( ) { 

var str = document . ge t E 1 emen t By I d ( " f o rmu 1 a i r e " ) .value; 
document . getElementByld ( "f ormulaire" ) .className = ""; 

La variable str contiendra la ou les lettres encodee(s) (value) par I'utilisateur dans la ligne de texte (getElementByld 

("formulaire") ). 

A present, considerons la propriete de style associee a la ligne de texte. A ce stade, rien n'est specifie (getElementByld 
(" formulaire "). className = ""). 

if (str != "") { 

document . getElementByld ( "popups" ) . innerHTML = ""; 



Si le contenu de la zone de texte n'est pas vide (str!= ""), le contenu de la balise <div id="popups"> du document 
Xhtml est initialise. A cet instant, ce contenu est vide (innerHTML = ""). 



for (var i=0; i<departements . length; i++) { 




var ce_departement = departements [i ]. nodeValue; 




if (ce_departement . toLowerCase ( ) . indexOf (str . toLowerCase ( ) ) 


== 0) { 


var tempDiv = document . createElement ( "div" ) ; 




tempDiv . innerHTML = ce_departement ; 




tempDiv . onclick = choix; 




tempDiv . className = "suggestions"; 




document . getElementByld ( "popups " ) . appendChild (tempDiv) ; 

} 

} 





Grace a une boucle for, tous les elements du tableau departements sont traites : il s'agit des donnees recuperees dans 
la fonction setdepartements o etudiee ci-avant (departements [i] ). Pour chaque element, la valeur du nceud (nodeValue) 
est retenue, soit le nom du departement. Ce nom est stocke dans la variable ce_departement. 



Puis un test conditionnel verifie si le contenu de la ligne de texte se trouve dans la ou les premiere(s) lettres du 
departement en utilisant la methode indexOf etudiee au chapitre Le JavaScript - Manipulation des chaines de caracteres 

(ce_departement . indexOf (str) == 0)). Par precaution le nom du departement et la variable str (toLowerCase () ) sont 
transformes en lettres minuscules. 

Si c'est le cas, un nouvel element <div> (createElement ("div") ) est cree ayant pour contenu le nom du departement 
(innerHTML = ce_departement ) . Le cas pour lequel I'utilisateur chppisit cet element par un die de la souris est prevu. Ce 
die renvoie a la fonction choix() qui sera detaillee ulterieurement (onclick = choix) . L'affichage de cet element <div> est 
pris en charge par la propriete de style qui s'applique a la classe suggestions du fichier departements. ess (className = 
"suggestions"). 

Et enfin, ce nouvel element est inclus dans la balise <div id="popups"> en derniere position grace a la methode 

appendChild ( ) . 

var liste = document . getElementByld ( "popups " ) . childNodes . length; 
if (liste == 0) { 

document . getElementByld ( "formulaire" ) .className = "error"; 
} 

Le script prevoit, en outre, I'eventualite d'une saisie qui n'a rien a voir avec le nom des departements, par exemple le 
caractere @. La variable liste contient le nombre des noeuds enfant crees dans la balise <div id="popups"> par la 
boucle for precedente (getElementByld ("popups") .childNodes. length) . Dans le cas d'une saisie inadequat (liste == 
0), la feuille de style error est appliquee au formulaire. 
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if (liste == 1) { 

document . getElementByld (" formulaire " ) .value = document . getElementByld ( " 
popups" ) . f irstChild. innerHTML; 

document . getElementByld ( "popups ")• innerHTML = ""; 

} 

> 

} 



Le script prevoit egalement le cas ou il n'y aura qu'un seul departement possible a afficher a partir de la premiere lettre 
saisie dans la zone de texte. C'est le cas de la lettre J, le seul departement ayant pour initiale J est le Jura, de meme 
pour la lettre F le seul choix possible est le Finistere. Dans cette eventualite, le script peut afficher directement le 
departement. 

Voici I'explication du code : i cette variable liste ne contient qu'un seul element (liste == 1), JavaScript peut 
directement encoder dans le formulaire (get-EiementByid("formuiaire") .value) le contenu de ce seul element. II 
est alors inutile d'afficher ni meme de faire apparaitre le menu deroulant (get-EiementByid ( "popups") .innerHTML = "";). 

II ne reste pluq qu'a etudier la fonction choix o . 

function choix(evt) { 

var thisDiv = (evt) ? evt . target : window. event . srcElement; 
document . getElementByld ( "formulaire" ) .value = t h i s D i v . i nne r HTML ; 
document . getElementByld ( "popups" ) .innerHTML = ""; 
} 

La fonction choix o etait, rappelons-le, associee a I'evenement du die de la souris correspondant au choix de I'utilisateur 
d'un departement dans la liste des departements suggeres. La ligne (evt) ? evt. target : window. event . srcElement; 
assure la compatibilite avec Firefox et Internet Explorer : en effet les deux navigateurs ne gerent pas de la meme facon 
les evenements. Au die de la souris sur un element du menu deroulant, la valeur de celui-ci (thisDiv. inner html) est 
retenue pour etre mise dans la ligne de texte (getEiementByid("formuiaire") .value). Dans ce cas le menu deroulant 

peut alors etre efface (getElementByld ("popups") .innerHTML = ""). 

Le script complet devient done : 



window . onload = initAll; 
var xhr = null; 

var departements = new Array (); 
function initAll () { 

document . getElementByld (" formulaire " ) .onkeyup = searchSuggest ; 
if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

} 

if (xhr) { 

xhr . onreadystatechange = setdepartements; 
xhr . open ( "GET" , "departements . xml " , true) ; 
xhr . send (null ) ; 
} 

else { 

alert ( "Desole, votre navigateur n'est pas compatble avec AJAX"); 

} 

} 

function setdepartements ( ) { 
if (xhr . readyState ==4) { 
if (xhr. status == 200) { 
if (xhr . responseXML) { 

var tousdepartements = xhr . responseXML . getElementsByTagName (" item" ) ; 
for (var i=0; i<tousdepartements . length; i++) { 

departements [ i ] = tousdepartements [i] . getElementsByTagName ( "dep" ) 

[0] . firstChild; 

I 
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} 
} 

else { 

alert ("II y a un probleme avec la requete " + xhr. status); 
} 

} 
} 

function searchSuggest ( ) { 

var str = document . getElementBy Id (" formulaire" ). value ; 
document . getElementByld (" formulaire "). className = ""; 
if (str != "") { 

document . getElementByld ( "popups "). innerHTML = ""; 
for (var i=0; i<departements . length; i++) { 
var ce_departement = depart ements [i] .nodeValue; 

if (ce_departement . toLowerCase (). indexOf (str . toLowerCase () ) == 0) { 

var tempDiv = document . createElement ( "div" ) ; 

tempDiv . innerHTML = ce_departement ; 

tempDiv . onclick = choix; 

tempDiv . className = "suggestions"; 

document . getElementByld ( "popups " ) . appendChild (tempDiv) ; 

} 

} 

var liste = document . getElementByld ( "popups "). childNodes . length; 
if (liste == 0) { 

document . getElementByld (" formulaire "). className = "error"; 
} 

if (liste == 1) { 

document . getElementByld (" formulaire " ) .value = 

document . getElementByld ( "popups " ) . f irstChild . innerHTML; 

document . getElementByld ( "popups "). innerHTML = ""; 

} 

> 

} 

function choix (evt) { 

var thisDiv = (evt) ? evt. target : window . event . srcElement ; 
document . getElementByld (" formulaire " ) .value = thisDiv . innerHTML; 
document . getElementByld ( "popups "). innerHTML = ""; 
} 



II reste a construire le fichier des proprieties de feuilles de style, soit departement. ess. 



.suggestions { background-color: #FFF; 

padding: 2px 2px; 

border: lpx solid #000;} 
.suggestions :hover { background-color: #9cf ; } 
#popups { position: absolute;} 

tformulaire { font: 9pt arial, helvetica, sans-serif;} 
#formulaire . error { background-color: #FFC; } 



Commentaires : 

• Les suggestions du script (.suggestions) seront affichees avec un arriere-plan de couleur blanche et avec une 
fine bordure. 

• Au survol de la souris, ces suggestions (.suggestions) apparaissent avec un arriere-plan de couleur. 

• L'encodage dans la ligne de texte (#formulaire) se realise en police Arial, 9 points. 

• Si I'utilisateur saisit une lettre ou un caractere qui ne correspond pas a la liste des departements 

(tformuiaire. error), la ligne de texte apparait en jaune. 



C\ Ce script est globalement compatible entre Internet Explorer et Firefox.Cependant, les effets de style ne sont pas 
" presents dans Firefox car, en effet, il faudrait utiliser class (au lieu de className sous Internet Explorer). Nous 
n'en avons pas tenu compte pour eviter de rallonger le script. 
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Un double menu deroulant 



Cet exemple met en oeuvre un double menu deroulant (balises <seiect> ... </seiect>) dans lequel, en fonction du choix effectue 
dans la premiere liste deroulante, les options de la seconde liste sont differentes, le tout, sans faire appel a un langage serveur 
comme PHP. 

Les captures d'ecran suivantes illustrent le script. 
La situation de depart est la suivante : 



r http://localhost/combo3. htm - Windows Inte... 



y * |g] http://localhost/combi v | *t \ | X 
& jghttp://localhost/combo3.htm | & ' 0 



Faites un premier choix v. 



Faites un second choix v 



* J Intranet local 



\ 100% 



Le premier menu propose les choix : OS, Navigateur et Programmation. 



■ r http://localhost/combo3. htm - Windows Inte... f^jjnjfx] 



Q> , - -r ^ http://l ocalhost/comb. v | \*t \ | X 



& Jghttp://localhost/combo3.htm 



Faites un premier choix v 



Faites un premier choix 



Faites un second choix v 



OS 

Navigateur 
Programmation 



* j Intranet local 



+v 100% 



En choisissant I'option OS du premier menu, le second menu deroulant propose les options : Windows XP, Windows Vista, Mac OS et 
Unix. 



■ r http://localhost/combo3. htm - Windows Inte... 



" ^ http://localhost/combi v *f | j X 



ik 43 ghttp://localhost/combo3.htm 



OS 



,v Faites un second choix v 



Faites un second choix 



Windows XP 
Windows Vista 
Mac OS 
Unix 



*J Intranet local 



+ v 100% 



Si I'option Navigateur est retenue, ces options deviennent : Explorer 5.0, Explorer 5.5, Explorer 6.0, Explorer 7.0, Firefox, 
Netscape, Safari et Konqueror. 
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£. http://localhost/combo3. htm - Windows Inte... Q[Sjfx] 


j^P*:* •»• http://localhost/comb. v 


++ 


X| Live Search 


"Vi gghttp://localhost/combo3.htm 





Navigateur 



Faites un second choix v 



Faites un second choix 



Explorer 5.0 
Explorer 5.5 
Explorer 6.0 
Explorer 7.0 
Firefox 
Netscape 
Safari 
Konqueror 



Intranet local 



\ 100% 



Et enfin pour le dernier choix Programmation, la seconde liste se change en PHP, ASP et Ruby. 



F —ii- .. .mi. i- i i ii.i ., i. ■■ — — ii .. ■■■-.■i 

£ http://localhost/combo3. htm - Windows Inte... f-~|f5"fx] 




gj http://localhost/comb. v 


\*f\ 


IxJ 


Live Search 


http : //localhost/combo3 .htm 




j Or - 5) 


» 


















Programmation v 




Faites un second choix v 










Faites un second choix 








PHP 
















ASP 
















Ruby 


























— i — — r 


*j Intranet local 






■i^ 100% 





Concevons le fichier Xhtml de depart 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/ TR/xhtmll /DTD/ xhtml 1 -transitional . dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Script Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text/ javascript" /> 

</head> 

<body> 

<form name="f ormulaires" action=""> 

<select name^" f orml " onChange="changement (this) "> 

<option>Faites un premier choix</option> 

<option>OS</option> 

<option>Navigateur</option> 

<option>Programmation</ option> 

</ select >  

<select name="form2"> 

<option>Faites un second choix</option> 

</select> 

</f orm> 

</body> 

</html> 



Commentaires : 

• Le formulaire (global) porte le nom suivant : name="formuiaires". 

• Les menus deroulants portent respectivement les noms name="formi" et name="form2". 

• Le choix effectue par I'utilisateur dans le premier menu deroulant est pris en charge par la fonction changement (this) du script. 
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Les elements de la seconde balise <seiect> sont presents sur le serveur sous la forme d'un fichier texte comportant les differentes 
options separees par le signe etoile *. 

Soit le fichier OS.txt : 

'Windows XP*Windows Vista*Mac OS*Unix 
Le fichier Navigateur.txt : 

'Explorer 5.0*Explorer 5.5*Explorer 6 . 0*Explorer 7 . 0*Firef ox* 
Nets cape *Safari*Konquer or 

Et enfin, le fichier Programmation.txt : 

*PHP*ASP*Ruby 

Le script a pour mission, apres avoir recupere I'option selectionnee au niveau du premier menu, de faire une requete sur le fichier texte 
concerne, de separer les informations fournies par ce fichier et de les inclure dans le second menu. 

Elaborons ce script, ligne par ligne : 

<script type=' text/JavaScript ' > 
//< ! [CDATA [ 

function changement (forml) { 

La fonction changement () est appelee dans le fichier Xhtml lorsque I'utilisateur choisit une option dans le premier formulaire 

(onChange="changement (this)). 

var index = forml . selectedlndex; 

La variable index identifie I'option selectionnee par I'utilisateur dans le premier menu grace a la propriete selectedlndex. 

var valeur = forml [ index ] .text; 

La variable valeur retourne le texte associe a I'option (balise <option> . . . </option>) selectionnee. 

var f ormulai re se lement s = document . formulaires . elements 
var f orm2 element s = f ormul ai rese lement s [" f orm2 "] ; 

Plus loin dans le script, il faudra pointer les elements du second menu. La variable formuiaireseiements liste tous les elements du 
formulaire global (formulaires). La variable form2eiements ne reprend que les elements du second menu (form2). 

url = valeur + ".txt"; 

Le nom du fichier texte a utiliser lors de la requete HTTP est construit a partir de la variable valeur a laquelle on ajoute I'extension 
".txt". 

if (valeur ! = "Faites votre choix") { 



Lorsque I'utilisateur effectue un choix dans le premier menu deroulant, soit lorsque la variable valeur est differente de I'option 
proposee par defaut (if (valeur != "Faites votre choix" ) ), la procedure pour initialiser la requete peut etre abordee. 



var xhr = null; 




if (window. XMLHttpRequest) { 




xhr = new XMLHttpRequest () ; 
) 




else if (window. ActiveXOb ject) { 




xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP" ) ; 




) 

else { 




alert ("Votre navigateur n'est pas compatible avec AJAX. 
) 


• ") ; 



L'objet xhr est cree de sorte a etre compatible pour les differents navigateurs. 



if(xhr) { 

xhr . onready statechange = function ( ) 1 

if (xhr . readyState == 4 && xhr. status == 200) { 

On s'assure que l'objet xhr a bien ete cree (if (xhr) ) et que la requete a bien abouti (xhr.readystate == 4 et xhr. status == 200). 

var form2reponse = xhr . responseText ; 

La variable form2reponse contient le fichier retourne par la requete sous forme d'un fichier texte (xhr. responseText). 
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contenuform2 (form2reponse, f orm2elements ) ; 

) 

} 

xhr . open ( "GET" , url, true); 

xhr . send (null ) ; 

) 

) 
} 



La fonction contenuform2 o qui va construire le second menu deroulant, peut alors etre appelee, avec en arguments, le fichier resultant 
de la requete (form2reponse) et les elements du second menu (form2eiements). 

function cont enuf o rm2 ( f orm2 reponse , f o rm2 el ement s ) { 
var form2options = form2reponse. split ( " * " ) ; 

La premiere tache de la fonction contenuform2 o consiste a retrouver les differents items contenus dans le fichier form2reponse. Pour ce 
faire, la methode split()de I'objet String est utilisee : elle retourne sous forme de tableau, les elements de la chaine de caracteres en 
tenant compte du separateur etoile *. 

f orm2elements = 1 ; 

form2elements . length = f orm2 opt ions . length ; 

On informe le moteur JavaScript que le nombre d'elements du second menu (form2eiements . length) sera egal au nombre de sous- 
chames de caracteres contenues dans le tableau retourne par la methode splitQ (form2options . length). 

Par I'intermediaire d'une boucle for, il suffit, pour terminer le script, de transferer une par une, les sous-chames de caracteres 

(form2options [i] ) vers le texte asSOCie aux options du second menu <select> (form2elements [i] .text) 

for (i=l; i < form2options . length; i++) { 
form2elements[i].text = form2options[i]; 
) 
) 

//] ] > 
</script> 

Le fichier Xhtml complet de cet exemple devient : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http : //www . w3 . org/1 999/xhtml" xml : lang=" f r" lang="fr"> 

<head> 

<title>Script Ajax</title> 

<meta http-eguiv="Content-Type" content="text/html; charset=iso-8859-l" /> 
<meta http-eguiv="Content-Script-Type" content="text/ javascript" /> 
<script type=' text/ JavaScript' > 
//<! [ CDATA [ 

function changement { f orml ) { 

var index = f orml . selectedlndex; 

var valeur = f orml [index] .text; 

var f ormulaireselements = document . formulaires . elements 

var f orm2elements = f ormulaireselements [" form2 "] ; 

url = valeur + ".txt"; 

if (valeur != "Faites votre choix") { 

var xhr = null; 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

) 

else if (window. ActiveXOb ject ) { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP" ) ; 

) 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
) 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var form2reponse = xhr . responseText ; 

contenuf orm2 (form2reponse, f orm2elements ) ; 

) 

) 

xhr . open ( "GET" , url, true); 

xhr . send (null ) ; 

) 

) 
) 

function contenuform2 (form2reponse, f orm2elements ) { 
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var f orm2options = f orm2reponse . split ("*") ; 
f orm2elements . length = 1; 

f orm2elements . length = f orm2options . length; 
for (i=l; i <<+>f orm2options . length; i++) { 
form2 elements [ i ] . text = f orm2 opt ions [i] ; 
} 
} 

//]]> 
</script> 
</head> 
<body> 

<form name="f ormulaires" action=""> 

<select name=" f orml " onChange="changement (this) "> 

<option>Faites un premier choix</option> 

<option>OS</option> 

<option>Navigateur</ option> 

<option>Programmation</option> 

</ select >  

< select name=" f orm2 " > 

<option>Faites un second choix</option> 

</select> 

</ f orm> 

</body> 

</html> 



Pour rendre le script fonctionnel, il faudrait associer une action (par exemple, un lien vers une page) a I'option retenue dans le second 
menu deroulant. 



^ Ce script est parfaitement compatible entre Firefox et Internet Explorer. 
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Un menu de navigation 



L'exemple suivant propose un tableau d'une ligne et de deux colonnes. En cliquant sur un lien du menu de navigation 
dans la premiere colonne, la page demandee s'affiche dans la seconde colonne. 

Les pages affichees dans la seconde colonne sont presentes sur le serveur et sont appelees par une requete HTTP. 
La capture d'ecran illustre la situation d'origine. 



f Ajax - Windows Internet Explorer 



□US 



iQj |£ >j ▼ |g] http://localhost/navig v | *t j \ X I 



I Ajax 



*j Intranet local 



Page 1 


Accueil 


Page 2 




Page 3 




Page 4 




Lien brise 





*i 100% ' 



Au die sur le premier lien du menu de navigation, la page 1 s'affiche. 



^ Ajax - Windows Internet Explorer 



EMIK 



http://localhost/navig 



*t\\x 



Live Search 



fi Ajax 



Page 1 
Pafe 
Page 3 
Page 4 
Lien brise 



Page 1 



Lorem ipsua dolor sit ssdsl consectetiier alii: tdng 
elit Sed r.ori r isus Suspendissele:tus torior. 
diEr.issin sit sr;;: ii:c:;::r.gr.sc nitrides se4 
dolor Cr=s elerfienrjasul trices disa M=e:er<.=s liguls 
rtssss. %-srius s. semper HIBK eui saod non. at 
Proin portti tor. orci nee naanany oolestie. enia est 

. : - •-. • •-• •• .•- : ••- :'. erst 

Duis seaper Duis sreunssss. scelerisque vit&e. 
cortsequst in. preti'jas s. er.irt 



% j Intranet local 



\ 100% 



Le script prevoit la possibility d'un lien brise. Ce qui occasionne un message d'erreur illustre par la capture d'ecran 
suivante. 
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■ r Ajax - Windows Internet Explorer 



http://localhost/navig 



rt x 



Live Search 



Page 1 


La page n'est pas 


Page 2 


disponible. 






Page 4 


Erreur : 404 


Lien brise 





* J Intranet local 



\ 100% 



cont ent=" text/ javascript " 
content="text/css " /> 



Le fichier Xhtml de depart, avec quelques declarations de style se presente comme suit 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv=" Content-Style-Type" 
<style type="text/css"> 

<! — 

♦tableau { border-collapse: collapse; 

border: solid black lpx; 

height : 200px; } 
.tdl { border-right : solid black 1 px; 

padding : 5px; } 
.td2 { padding: 5px; } 

a:link { text-decoration : none; color : #000000 ; 
a : visited 
a: hover { 
a : active 
— > 

</style> 
</head> 
<body> 

<table width="300" id="tableau"> 
<tr> 

<td valign="top" width="80 



{ text-decoration : none; color : #000000; 
text-decoration : none; color : #000000; } 
text-decoration : none ; color : #000000; 



' javascript : void ( 0 
'javascript : void ( 0 
'javascript : void ( 0 
'javascript : void ( 0 
' javascript : void ( 0 



<a href= 
<a href= 
<a href= 
<a href= 
<a href= 
</td> 

<td valign="top" width="220" class="td2"> 

<div id="contenu " ><h2>Accueil</h2x/div> 

</td> 

</tr> 

</table> 

</body> 

</html> 



class="tdl"> 

onclick="open_url ( ' pagel . htm' ) ">Page K/a><br /> 
onclick="open_url ( ' page2 . htm' ) ">Page 2</a><br /> 
onclick="open_url ( ' page3 . htm' ) ">Page 3</a><br /> 
onclick="open_ur 1 ( ' page4 . htm' ) " >Page 4</a><br /> 
onclick="open_ur 1 ( ' xxxxx . htm' )">Lien brise</a> 
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Le code de la balise de lien <a> . . . </a> necessite quelques commentaires : 

• Habituellement, au die d'un lien, la page specifiee dans I'attribut href est chargee par le navigateur. Dans ce 
script, ce traitement classique du Xhtml n'est pas utilise, ainsi nous utilisons a la place la fonction open_uri(). 
Pour passer outre a toute action de I'attribut href, la notation javascript : void (0) est utilisee. 

• Au die du lien, la fonction open_uri() est appelee et prend comme argument, I'adresse du fichier a afficher, par 
exemple open_url ('pagel.htm' ) . 

Les fichiers pagel.htm, page2.htm, page3.htm et page4.htm sont des fichiers Xhtml basiques. Voici le code du fichier 
pagel.htm. 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Page K/title> 

<meta http-equiv="Content-Type" content="text/html " /> 

</head> 

<body> 

<h2>Page K/h2> 

<p style=" font-size : 9px">Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim 

sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum 

ultrices diam. Etc... </p> 

</body> 

</html> 



Le script presente un codage dont la plupart des elements devraient etre assimiles a ce stade de I'etude. 

<script t ype= ' text / JavaScript ' > 

//< ! [CDATA [ 

var xhr = null; 

function ope n_u r 1 ( u r 1 ) { 

Apres avoir defini la variable xhr comme une variable globale, la fonction open_uri (uri) , appelee au die sur un lien dans 
le code Xhtml, est initialisee. 



var xhr = null; 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 
} 

> 



L'objet xhr est cree pour etre compatible entre les navigateurs Firefox et Internet Explorer. 

xhr . onreadystatechange = function)) { response () ; } 
xhr . open (" GET " , url, true); 
xhr. send (null) ; 
} 

La requete HTTP est effectuee. Aux changements d'etats de celle-ci, la fonction reponse o est appelee. 

function response () { 

if ( xhr . ready State == 4) { 

if (xhr . status==200) { 

document . getElementByld ( "contenu" ) . innerHTML = xhr . r e sp on s e Text ; 
} 

La fonction reponse o, apres avoir etabli que les conditions habituelles sont remplies (xhr.readystate == 4 et 



© ENI Editions - All rigths reserved 



xhr. status = 200), va ecrire dans la balise <div id="contenu">, le fichier transmis sous forme d'un fichier texte. II faut 
remarquer qu'il s'agit bien d'un fichier Xhtml car celui-ci repond bien a la definition de texte brut, agremente de balises 
permettant son affichage. 



else { 

document . getElementByld ( "contenu" ) . innerHTML = "<h3>La page n'est pas di 

sponible. <br> <br> Erreur : " + xhr. status + "</h3"; 

} 

} 



Si la requete n'a pu aboutir, soit dans le cas a cause d'un lien brise (si le fichier xxxxx.htm n'est pas present sur le 
serveur), un message d'erreur est affiche. 

//] ] > 

</ script> 

Fin du script. 

Le fichier Xhtml complet, avec le script, se presente comme suit : 



IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Script Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

<script type=' text/ JavaScript ' > 

//<! [CDATA [ 

var xhr = null; 

function open_ur 1 (ur 1 ) { 

if (window. XMLHttpRequest) { 

xhr = new XMLHttpRequest () ; 

} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

} 

xhr . onreadystatechange = function () { reponseO; } 
xhr . open ( "GET" , url, true); 
xhr . send (null ) ; 
} 

function reponseO { 

if (xhr . readyState ==4) { 

if (xhr . status==200) { 

document . getElementByld ( "contenu" ) .innerHTML = xhr . responseText ; 
} 

else { 

document . getElementByld ( "contenu" ) .innerHTML = "<h3>La page n'est pas 

disponible . <br><br>Erreur : " + xhr. status + "</h3"; 

} 

> 
} 

//]]> 

</ script> 

<style type="text /ess "> 

<! — 

♦tableau { border-collapse: collapse; 

border: solid black lpx; 
height : 200px; ) 
.tdl { border-right : solid black lpx; 

padding : 5px; } 
.td2 { padding: 5px; } 
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a:link { text-decoration : none; color : #000000 ; } 
a:visited { text-decoration : none; color : #000000; } 
a:hover { text-decoration : none; color : #000000; } 
a:active { text-decoration : none; color : #000000 ; ) 

— > 

</style> 

</head> 

<body> 

<table width="300" id="tableau"> 
<tr> 



<td valign="top" width="80 
<a href=" javascript : void ( 0 
K/axbr /> 

<a href=" javascript : void ( 0 
2</a><br /> 

<a href =" j avascript : void ( 0 
3</a><br /> 

<a href =" j avascript : void ( 0 
4</a><br /> 

<a href =" javascript : void ( 0 
brise</ a> 

</td> 

<td valign="top" width="22 
<div id="contenu " ><h2>Accueil</h2x/div> 

</td> 

</tr> 

</table> 

</body> 

</html> 



class="tdl"> 
onclick="open_url ( ' pagel . htm' ) ">Page 



onclick="open_url ( ' page2 . htm' ) ">Page 
onclick="open_url ( ' page 3 . htm' ) ">Page 
onclick="open_url ( ' page 4 . htm' ) ">Page 
onclick="open_ur 1 ( ' xxxxx . htm' ) " >Lien 

class="td2"> 



Q Le script est compatible entre Internet Explorer et Firefox. 
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Un script de login 



Les utilisateurs autorises a acceder a un site ont chacun un identifiant (utilisateur) et un mot de passe qui leur est 
propre dans un document XML. ces deux chaines de caracteres sont listees. Si les donnees encodees sont valides, 
I'acces au site est accorde. Dans le cas contraire, un message d'erreur apparait. 

Dans le cadre de I'exemple, les binomes (utilisateur/mot de passe) sont (Admin Admin), (Userl Passl) et (User2 Pass2). 
Pour augmenter le nombre d'utilisateurs, il suffit d'ajouter leurs identifiants dans le fichier XML. 

C\ Les scripts de login et de mot de passe en JavaScript posent des problemes de securite car le code source est 
^accessible. Le script n'echappe pas a la regie malgre la complexite du code. Un login n'est efficace que s'il fait 
appel a un langage de programmation cote-serveur comme PHP ou ASP. 



C Ajax - Windows Internet Explorer fjTjfpjfx' 



CI - 



http://localhost/login; 




5 





I 

Utilisateur : 
Mot de passe : 



Me connecter 



* | Intranet local + v 100% ' 



Le fichier Html de depart comporte deux lignes de texte et un bouton. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 

</head> 

<body> 

<form action=""> 
<table border="0"> 
<tr> 

<td align="right">Utilisateur : </td> 

<td><input type="text" id="idlogin" size="15" /></td> 

</tr> 
<tr> 

<td align="right">Mot de passe : </td> 

<td><input type="text" id="idpass" size="15" /></td> 

</tr> 

<tr> 

<td align="center" colspan="2"> 

<br /xinput type="button" onclick="log ( ) " value="Me connecter" /> 

</td> 

</tr> 

</table> 

</form> 

</body> 

</html> 



Le fichier login. xml contient les utilisateurs autorises : 
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<?xml version="l . 0" encoding=" ISO-885 9-1 " ?> 
<utilisateurs> 

<user><login>Admin</login><pass>Admin< /pas s>< /user > 
<userxlogin>Userl</login><pass>Passl< /pas s>< /user > 
<userxlogin>User2</login><pass>Pass2</pass></user> 
</utilisateurs> 



La structure est la suivante : 



<utilisateurs> 
<user> 

<loginx/login> 
<pass></pass> 
</user> 
</utilisateurs> 



Le script devient : 



<script type=' text/ JavaScript ' > 

//<! [CDATA [ 

var xhr = false; 

function log() { 

login=document . get Element By Id ( " idlogin" ) . value ; 
pass=document . get Element By Id ( "idpass " ) .value; 



La variable xhr est definie (variable globale). La fonction log() est appelee dans le fichier Xhtml par le die sur le bouton 
Me connecter, puis recupere les valeurs encodees dans les lignes de texte du document Xhtml, soit respectivement les 
variables login et pass. 



if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 
} 

} 



L'objet correspondant a une requete HTTP est cree. 



if (xhr) { 

xhr . onreadystatechange = verif; 
xhr .open ("GET", "login. xml", true); 
xhr . send (null ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX"); 

} 

> 



La requete vers le fichier login. xml s'effectue en mode asynchrone. Au changement d'etat de la requete 

(xhr . onreadystatechange), la fonction verif () est appelee. 



function verif () { 

if (xhr . readyState == 4) { 

if (xhr. status == 200) { 

if (xhr . responseXML) { 

var login_el = new Array (); 

var logins = xhr . responseXML . getElementsByTagName ( "login" ) ; 



La fonction verif o, apres s'etre assuree que la requete s'est effectuee de fagon correcte (xhr.readystate == 4 et 

xhr. status == 200), traite le fichier regu COmme un Objet XML (xhr. responseXML). 

La variable iogin_ei est definie comme une variable indexee en vue de son utilisation ulterieure. Du fichier XML regu 

(xhr. responseXML), le tableau logins liste tous les elements (getElementsByTagName ("login") ; ) comportant la balise 

<login>. 
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for (var i=0; i<logins . length; i++) { 
login_el[i] = logins [i] . firstChild; 
var celogin = login_el[i] .nodeValue; 



Une boucle for passe en revue, un par un, les elements de la variable logins (soit logins [i]) et plus precisement le 
premier noeud enfant de celui-ci (firstchiid). La variable celogin stocke le texte de ce noeud enfant (nodeValue). Elle 
contient done le texte compris entre les balises <iogin> . . . </iogin> du fichier XML. 



if (login . toLowerCase ()==celogin . toLowerCase ( ) ) { 

var cepass=logins [ i ] . nextSibling . firstChild . nodeValue; 

if (pass . toLowerCase () ==cepass . toLowerCase () ) { 

window . location . href ="xxx . htm" ; 

} 



On teste alors par la condition (if (iogin==ceiogin) ) si la variable celogin est egale au texte saisi par I'utilisateur (pour 
rappel la variable login). Cette comparaison de variables s'affectue sur des chaines en minuscules (methode toLowerCase 
O *, rendant ainsi I'encodage case insensitive. 

II faut a present s'occuper du mot de passe. La propriete nextSibling permet d'acceder aux balises <pass> au meme 
niveau que la balise <iogin> dans I'arborescence du fichier XML. Le texte compris entre les balises <pass> . . . </pass> 
est alors obtenu par firstchiid. nodeValue. Celui-ci est stocke dans la variable cepass. Si cette derniere est egale a la 
saisie de I'utilisateur, soit a la variable pass (if (pass==cepass) ), I'acces au site peut etre accorde 
(window. location. href) vers une page quelconque, ici xxx.htm. 




Si a ce stade, le login ou le mot de passe ne correspond pas aux informations du fichier XML, un message d'erreur 
s'affiche dans une boite d'alerte. 



£2 Ajax - Windows Internet Explorer f^~)fn~|| X 



Qtt^f " l<g]http://localhostyiogin; v *f X 



Live 



Utilisateur : 
Mot de passe : 



xxx 



yyy 



Me connecter 



\J Intranet local 



Windows Internet Explorer 



Login ou mot de passe incorrect 

t 



OK 



J 




else { 

alert ("II y eu un probleme " + xhr. status), 



} 



//]]> 

</ script> 



Le script est termine. 

Le fichier login.html complet devient : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 

<script type=' text/ JavaScript ' > 

//<! [CDATA [ 

var xhr = false; 

function log() { 

login=document . get Element By Id ( " idlogin" ) . value ; 
pass=document . getElementByld ( "idpass " ) . value ; 
if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

} 

if (xhr) { 

xhr . onreadystatechange = verif; 
xhr .open ("GET", "login. xml", true); 
xhr . send (null ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX"); 

} 

} 

function verif () { 
if (xhr . readyState ==4) { 
if (xhr. status == 200) { 
if (xhr . responseXML) { 

var logins = xhr . responseXML . getElementsByTagName (" login" ) ; 

var login_el = new Array (); 

for (var i=0; i<logins . length; i++) { 

login_el[i] = logins [i] . firstChild; 

var celogin = login_el[i] .nodeValue; 

if (login . toLowerCase ()==celogin . toLowerCase ( ) ) { 

var cepass=logins [ i ] . nextSibling . firstChild. nodeValue; 

if (pass . toLowerCase () ==cepass . toLowerCase () ) { 

window . location . href =" car net . htm" ; 

} 

else { 

alert ("Login ou mot de passe incorrect"); 
} 

> 
} 
} 
} 

else { 

alert ("II y eu un probleme " + xhr. status); 
} 

> 
} 

//] ]> 

</ script> 

</head> 

<body> 

<form action=""> 
<table border="0"> 
<tr> 

<td align=" right " >Utilisateur : </td> 

<td><input type="text" id="idlogin" size="15" /></td> 
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</tr> 
<tr> 

<td align="right">Mot de passe : </td> 

<td><input type="text" id="idpass" size="15" /></td> 

</tr> 
<tr> 

<td align="center" colspan="2"> 

<br /xinput type="button" onclick="log ( ) " value="Me connecter" /> 

</td> 

</tr> 

</table> 

</ f orm> 

</body> 

</html> 



Q En I'etat, le script ne fonctionne que sous Internet Explorer. 
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Un diaporama en AJAX 



Soit un diaporama dont les elements sont situes sur le serveur et appeles par une requete HTTP. II faut noter que les 
elements du diaporama comportent des images mais egalement du commentaire. 



Ajax - Windows Internet Explorer □ fx] 



▼ |g] http://localhost/diapo g§| | ♦* 1 \X\ 



1-2-3-4-5 



Diaporama 



Commentaires 



mm 



* J Intranet local 



+,, 100% ' 
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▼ |gj http://localhost/diapo *'.\ \*t X 



W ^Ajax 




HTML - Entrainez-vous pour maitriser le code 
source 



■I 



* | Intranet local 



\ 100% 



Le fichier Xhtml de depart est le suivant 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style type="text/css"> 
<! — 
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♦tableau { border-collapse: collapse; 

border: solid black lpx; } 
.top { text-align : center ; 

background-color: #9cf ; } 
.diapo { height: 140px; 

text-align: center; 
border-top: solid black lpx; 
vertical-align: middle;} 
.comment {font-family: sans-serif; 
font-size: llpx; 
text-align: center; 
paddind : 3px; } 
a:link { text-decoration : none; color : #000000 ; } 
a:visited { text-decoration : none; color : #000000; } 
a:hover { text-decoration : none; color : #000000; } 
a:active { text-decoration : none; color : #000000 ; ) 
— > 

</style> 

</head> 

<body> 

<table width="235" id="tableau"> 

<tr> 

<td class="top"> 

<p> 

<a href =" j avascript : void ( 0 ) " onclick="go (0) ">K/a> - 

<a href =" j avascript : void ( 0 ) " onclick="go ( 1 ) " >2</a> - 

<a href =" javascript : void ( 0 ) " onclick="go (2) ">3</a> - 

<a href =" javascript : void ( 0 ) " onclick="go (3) ">4</a> - 

<a href =" j avascript : void ( 0 ) " onclick="go (4) ">5</a> 

</p> 

</td> 

</tr> 

<tr> 

<td class="diapo"><div id="image">Diaporama</divx/td> 

</tr> 
<tr> 

<td class="comment"><div id="commentaires">Commentaires 

<br />snbsp; </divx/td> 

</tr> 

</table> 

</body> 

</html> 

Les images sont contenues dans les fichiers Xhtml, imagel.htm, image2.htm, image3.htm, image4.htm et image5.htm. 
Soit a titre d'exemple, pour le fichier imagel.htm : 

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Image K/title> 

<meta http-equiv="Content-Type" content=" text /html " /> 

</head> 

<body> 

<p> 

<img border="0" src="html . jpg" width="108" height="120" /> 

</p> 

</body> 

</html> 

Les commentaires sont repris dans de simples fichiers de texte soit descriptionl.txt, description2.txt, description3.txt, 
description4.txt et description5.txt. 

Le fichier descriptionl.txt contient ainsi : 

HTML 4 - Maitrisez le code source (2eme edition) 
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^ \ Pour eviter les problemes d'encodage des caracteres, nous avons, sous Notepad, enregistre le fichier texte sous 
^ un codage UTF-8. 



Voici le script pas a pas : 



<script type=' text/ JavaScript ' > 


//<! [CDATA [ 




galerie = new Array (); 




galerie[0] = "imagel.htm" 




galerie [1] = "image2.htm" 




galerie [2] = "image3.htm" 




galerie [3] = "image4.htm" 




galerie[4] = "image5.htm" 




description = new Array () 




description [ 0 ] = "descriptionl.txt"; 


description [ 1 ] = "description2.txt"; 


description [2 ] = "description3.txt"; 


description [ 3 ] = "description4.txt"; 


description [4 ] = "description5.txt"; 


var index; 





Le script commence par la declaration de deux tableaux (Array), I'un pour recueillir les images (galerie) et un autre pour 
le texte explicatif (description). 



On declare aussi la variable globale index. 



function requetehttp ( ) { 
if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

} 

} 



Comme il faut effectuer, pour chaque ecran du diaporama, deux requites (une pour I'image et une autre pour le texte), 
la creation de I'objet xhr est confiee a la fonction requetehttp ( ) . Ce qui allege le code du script. 

function go (index) { 

var urll = ga le r ie [ index ] ; 

var url2 = de s c r ipt i on [ i ndex ] ; 

L'adresse du fichier contenant I'image est fournie par I'argument de la fonction go() au die de la souris dans le fichier 
Html. Cet index est fourni au tableau galerie. On procede de meme pour le texte descriptif. 

requetehttp ( ) ; 

On effectue une premiere requete (requetehttpQ) en vue de recuperer le fichier Xhtml contenant I'image. 

xhr . on r e ady s t at e change = function)) { reponseimg ( ) ; } 
xhr . open (" GET " , urll, true); 
xhr. send (null) ; 

Des que des informations sont disponibles sur 1'evolution de la requete (xhr .onreadystatechange), le script passe la main 

a la fonction reponseimg () . 
requetehttp ( ) ; 

Une seconde requete (requetehttp o ;) est envoyee en vue de recuperer cette fois le fichier texte contenant le 
commentaire. 

xhr . onreadystatechange = function)) { reponsecom ( ) ; } 
xhr . open ( "GET" , url2, true); 
xhr. send (null) ; 
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} 

Des que des informations sont disponibles sur revolution de cette requete (xhr .onreadystatechange), le script passe la 
main a la fonction reponsecomo pour traiter les commentaires. 

function reponseimg() { 

if ( (xhr . readyState == 4) && ( xhr . s t at us = = 2 0 0 ) ) { 

document . getElementByld ( "image" ) . innerHTML = xhr . r e spon s e Text ; 

} 

} 

La fonction reponseimg o , apres s'etre assure que tout s'est deroule correctement (xhr.readystate == 4 et 
xhr . status==200), affiche dans le fichier Xhtml (innerHTML), a I'emplacement prevu a cet effet dans le document pour les 

images (getElementByld ("image") ), la reponse a la requete SOUS forme de texte (xhr.responseText). 



function reponsecom() { 

if ((xhr.readystate == 4) && (xhr . status==200 ) ) { 

document . getElementByld (" commentaires " ) .innerHTML = xhr.responseText; 

} 

} 



La fonction reponsecom ( ) procede de meme pour les commentaires a I'emplacement prevu a cet effet dans le fichier Xhtml 

SOit dans la balise <div id="commentaires"> (getElementByld (" commentaires ") ). 

Le script se termine par : 

//] ] > 

</ script> 

Le fichier Xhtml complet est le suivant : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 99 9 /xhtml " xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content=" text /html ; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<meta http-equiv="Content-Style-Type" content="text/css " /> 
<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

galerie = new Array (); 
galerie[0] = "imagel.htm"; 
galerie [1] = "image2.htm"; 
galerie[2] = "image3.htm"; 
galerie [3] = "image4.htm"; 
galerie[4] = "image5.htm"; 
description = new Array (); 
description [ 0 ] = "descriptionl.txt"; 
description [ 1 ] = "description2.txt"; 
description [ 2 ] = "description3.txt"; 
description [ 3 ] = "description4.txt"; 
description [ 4 ] = "description5.txt"; 
var index; 

function requetehttp ( ) { 

if (window. XMLHttpRequest) { 

xhr<+>= new XMLHttpRequest () ; 

} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

> 

} 

function go (index) { 
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var urll = galerie [ index] ; 
var url2 = description [ index] ; 
requetehttp ( ) ; 

xhr . onreadystatechange = function () { reponseimg ( ) ; } 
xhr . open ( "GET" , urll, true) ; 
xhr . send (null ) ; 
requetehttp ( ) ; 

xhr . onreadystatechange = function () { reponsecom ( ) ; } 
xhr .open ("GET", url2, true); 
xhr . send (null ) ; 
} 

function reponseimg ( ) { 

if ( (xhr.readyState == 4) && (xhr . status==200) ) { 

document . getElementByld ( "image" ) . innerHTML = xhr . responseText ; 

} 

} 

function reponsecom () { 

if ((xhr.readyState == 4) && (xhr . status==200) ) { 

document . getElementByld (" commentaires " ) .innerHTML = xhr . responseText ; 

} 

} 

//] ]> 

</ script> 

<style type="text /ess "> 

<! — 

♦tableau { border-collapse: collapse; 

border: solid black lpx; } 
.top (text-align : center; 

background-color: #9cf; } 
.diapo {height: 140px; 

text-align: center; 
border-top: solid black lpx; 
vertical-align: middle;) 
.comment {font-family: sans-serif; 
font-size: llpx; 
text-align: center; 
padding : 3px; } 

a:link { text-decoration : none ; color:#000; } 
a:visited { text-decoration : none; color:#000; } 
a:hover { text-decoration : none; color:#000; } 
a:active { text-decoration : none; color:#000; ) 

— > 

</style> 

</head> 

<body> 

<table width="235" id="tableau"> 
<tr> 

<td class="top"> 

<p> 

<a href =" javascript : void ( 0 ) " onclick="go ( 0 ) " >K/a> - 

<a href=" javascript : void ( 0 ) " onclick="go (1) ">2</a> - 

<a href =" j avascript : void ( 0 ) " onclick="go (2) ">3</a> - 

<a href =" j avascript : void ( 0 ) " onclick="go (3) ">4</a> - 

<a href =" javascript : void ( 0 ) " onclick="go (4) ">5</a> 

</p> 

</td> 

</tr> 

<tr> 

<td class="diapo"><div id="image">Diaporama</divx/td> 

</tr> 
<tr> 

<td class="comment"><div id="commentaires">Commentaires<br /> 

Snbsp; </divx/td> 

</tr> 

</table> 

</body> 

</html> 



De nombreuses ameliorations ou evolutions de ce script de diaporama sont possibles, citons : 
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• Un prechargement des images. 

• Un effet d'affichage progressif pendant le chargement de I'image. 

• Un affichage aleatoire des images et des commentaires. 
. Etc. 

^ En I'etat, le script ne fonctionne convenablement que sous Internet Explorer. 



- 6- 



© ENI Editions - All rigths reserved 



Une previsualisation de la page 



L'exemple suivant propose la previsualisation de la page dans une boTte popup apparaissant au survol d'un lien par la 
souris. 

Cet exemple illustre bien le confort de navigation et I'interactivite que peut apporter le concept AJAX a I'utilisateur. 
Illustrons le script par des captures d'ecran. 
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Le fichier Xhtml de depart avec la feuille de style qui gere la fenetre de previsualisation est le suivant 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content="text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<style> 
< ! — 

#popup { position: absolute; 
top: lOpx; 
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left: lOpx; 

background-color: #9cf; 
width: 275px; 
height: 120px; 

font: . 9em Arial, sans-serif; 
padding: 5px; 
visibility: hidden; 
border: Ipx black solid; 
clip: auto; 
overflow: hidden;) 
a { color: black; 

text-decoration: none;) 

— > 

</style> 

</head> 

<body> 

<h3>Previsualisation au survol du lien</h3> 
<p> 

<a href ="pagel . htm">Vers page K/a><br /> 
<a href ="page2 . htm">Vers page 2</a><br /> 
<a href ="page3 . htm">Vers page 3</a><br /> 
<a href ="xxxxx . htm" >Vers page 4</a> 
</p> 

<div id="popup"> </div> 

</body> 

</html> 

Les fichiers pagel.htm, page2.htm et page3.htm sont des fichiers Xhtml quelconques. 

Nous avons repris les fichiers du point Un menu de navigation du present chapitre. Voici le code de la pagel.htm : 

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Page l</title> 

<meta http-equiv="Content-Type" content="text/html " /> 

</head> 

<body> 

<h2>Page K/h2> 

<p style=" font-size : 9px">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim 
sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. Etc . . . </p> 
</body> 
</html> 



Entamons I'etude du script. 



<script type=' text/ JavaScript' > 
//<! [CDATA [ 

window . onload = initial; 
var xhr = null; 
var xpos; 
var ypos; 



Au chargement de la page (window. onload), la fonction initial () est appelee. Differentes variables sont initialisees : la 
variable xhr, la variable xpos qui determine la position horizontale d'un point et la variable ypos qui determine la position 
verticale d'un point. 



function initial!) { 

var liens = document . getElementsByTagName ( "a" ) ; 

for (var i=0; i< liens . length; i++) { 

liens [ i ]. onmouseover = previsualisation; 

) 

) 



La fonction initial () a pour mission d'associer la fonction previsualisation o au survol par la souris des liens de la 
page. La variable liens liste toutes les balises <a> du document (getElementsByTagName ("a") ). Tous les liens sont 
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traites par une boucle for qui associe la fonction previsuaiisation o a I'evenement survol (onmouseover) des liens (liens 
[i]). 

function cacher() { 

document . getElementByld ( "popup" ) . s t y 1 e . vi s ib i 1 i t y = "hidden"; 
} 

La fonction cachero a pour but de cacher la fenetre popup. Ceci se fait en affectant la declaration de visibilite CSS 

(style .visibility) de la fenetre de previsuaiisation (getElementByld ("popup") ) a la valeur hidden. 



function previsuaiisation (evt ) { 
if (evt) { 

var url = evt. target; 
} 

else { 

evt = window . event ; 

var url = evt . srcElement; 

} 



La fonction previsuaiisation o possede comme argument I'evenement evt de la fonction initial o, soit le survol de la 
souris sur un lien. 

Les navigateurs Internet Explorer et Firefox n'ont pas la meme gestion des evenements, specialement pour faire 
reference a I'element d'ou provient I'evenement. Avec Firefox et les navigateurs de la famille Mozilla, il s'agit de la 
propriete evt. target qui fait reference a I'objet origine de I'evenement. Avec les navigateurs de type Internet Explorer, il 
faut d'abord acceder a I'objet-evenement par window. event puis a I'element dans lequel a eu lieu I'evenement par 

srcElement . 

L'adresse (var url) associee au survol du lien par la souris est donnee par evt. target pour Firefox et par 
window. event. srcElement pour Internet Explorer. Le script est ainsi compatible. 

xpos = e vt. client X; 
ypos = evt.clientY; 

La variable xpos note la position horizontale du pointeur de la souris au survol du lien et la variable ypos, la position 
verticale de celui-ci. 



if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

) 



L'objet requete HTTP est cree de fagon compatible avec les navigateurs Firefox et Internet Explorer. 



if (xhr) { 

xhr . onreadystatechange = afficher; 
xhr . open ( "GET" , url, true); 
xhr . send (null ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible AJAX"); 

} 

} 



La requete est effectuee. Au premier changement d'etat de celle-ci, la fonction afficher o est appelee. 



function afficher () { 

var previsu = document . getElementByld ( "popup" ) ; 
if (xhr . readyState ==4) { 
if (xhr . status==200) { 

previsu . innerHTML = xhr . responseText; 
previsu . sty le . top = yPos+10 + "px"; 
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previsu . style . left = xPos+10 + "px"; 
previsu . style . visibility = "visible"; 
previsu . onmouseout = cacher; 



Dans la fonction afficher o , la variable previsu est d'abord definie comme etant la fenetre popup (getEiementByid 
("popup")). Si la requete s'est deroulee correctement (xhr . readystate == 4 et xhr. status == 200), le contenu de celle- 

Ci (xhr . responseText) est affiche dans la fenetre popup (previsu. innerHTML). 

On cree un leger decalage vertical (previsu. style. top = (yPos+10) + "px") puis horizontal (previsu. style . left = 
xPos + 10 + "px"). 

La fenetre popup devient alors visible (previsu. style. visibility = "visible"). Lorsque le pointeur de la souris quitte 
la fenetre popup (previsu. onmouseout), la fonction cacher () est appellee. 



else { 

previsu . innerHTML = "La page n'est pas disponible. <br> <br> Erreur 
+ xhr. status; 



) 



Si la requete ne s'effectue pas, un message d'erreur est affiche dans la fenetre popup (previsu. innerHTML) avec le code 
(xhr. status) de I'erreur. 



£5 AJAX - Windows Internet Explorer 



▼ http://localhost/previ< ; N| \^t\ \ X | Livi 



>AJAX 



Previsualisation au sun ol du lien 

Vers page 1 
Vers page 2 



eft nnrrr- > 



La page n'est pas disponible 
Erreur : 404 



*• i Intranet local 
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//] ] > 

</ script> 



Fin du script 

Le fichier Xhtml complet devient : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www. w3 . org/TR/xhtmll /DTD /xhtml 1 -transitional . dtd"> 

<html xmlns="http://www. w3.org/1999/xhtml" xml : lang=" f r " lang="fr"> 

<head> 

<title>Ajax</title> 

<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<script type=' text/ JavaScript ' > 
//<! [CDATA [ 

window . onload = initial; 
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var xhr = null; 
var xPos; 
var yPos; 

function initial!) { 

var liens = document. getElementsByTagName ( "a" ) ; 

for (var i=0; i< liens . length; i++) { 

liens [ i ]. onmouseover = previsualisation; 

} 

> 



function cacher() { 

document . getElementByld ( "popup" ) . style . visibility = "hidden"; 
} 



function previsualisation (evt ) { 
if (evt) { 

var url = evt. target; 
} 

else { 

evt = window . event ; 

var url = evt . srcElement; 

} 



xPos = evt.clientX; 
yPos = evt.clientY; 



if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest () ; 
} 

else { 

if (window . Act iveXObject ) { 
try { 

xhr = new ActiveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

catch (e) { ) 

} 

} 

if (xhr) { 

xhr . onreadystatechange = afficher; 
xhr .open ("GET", url, true); 
xhr . send (null ) ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible AJAX"); 

} 

} 

function afficher () { 

var previsu = document . getElementByld ("popup"); 
if (xhr.readyState ==4) { 
if (xhr . status==200) { 

previsu . innerHTML = xhr . responseText; 
previsu . style . top = (yPos+10) + "px"; 
previsu . sty le . left = (xPos+10) + "px"; 
previsu . style . visibility = "visible"; 
previsu . onmouseout = cacher; 
} 

else {previsu . innerHTML = "La page n'est pas disponible. <br> <br> 

Erreur : " + xhr. status;) 

} 

} 

//]]> 
</ script> 
<style> 
<! — 

#popup { position: absolute; 
top: lOpx; 
left: lOpx; 

background-color: #9cf; 
width: 275px; 
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height: 120px; 

font: . 9em arial, sans-serif; 
padding: 5px; 
visibility: hidden; 
border: Ipx black solid; 
clip: auto; 
overflow: hidden;} 
a {color: black; 

text-decoration: none;} 

— > 

</style> 

</head> 

<body> 

<h3>Previsualisation au survol du lien</h3> 
<p> 

<a href ="pagel . htm">Vers page K/a><br /> 
<a href ="page2 . htm" >Vers page 2</a><br /> 
<a href ="page3 . htm">Vers page 3</a><br /> 
<a href ="xxxxx . htm" >Vers page 4</a> 
</p> 

<div id="popup"> </div> 

</body> 

</html> 



^ Comme signale plus haut, le script est compatible entre Internet Explorer et Firefox. 
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Un menu vertical dynamique 



Arrive au terme de votre apprentissage d'Ajax, il semble interessant d'aborder un exemple, peut-etre un peu plus 
complexe, qui mele non seulement les requetes asynchrones mais egalement le traitement dynamique des feuilles de 
style CSS et la creation par le DOM, elements de la page. 



CS Cet exemple est directement inspire du script AJAX Switch Menu de Martial Boissonneault. Nous livrons ici une 
" version simplifiee et personnalisee afin de rester dans la ligne pedagogique que nous nous sommes fixes dans le 
cadre de cet ouvrage.La version complete est telechargeable sur le site www.getelementbyid.com/. 



L'idee du script est de "confectionner" par le DOM, un menu de navigation vertical a partir des donnees reprises dans un 
simple document XML. 

Ce script permet done la realisation, a la commande, de multiples menus de navigation par la seule modification du 
document XML. La creation et la mise a jour d'un menu de navigation necessite toujours un travail long et perilleux, pour 
contourner ce probleme, ce script rend parfaitement modulable, et simple d'utilisation, la mise en place de ces menus. 

> Home 
- Accueil 



> Produits 

- Produit 1 

- Produit 2 

- Produit 3 



> Services 

- Service 1 

- Service 2 

- Service 3 

- Service 4 

- Service 5 



> Home 
- Accueil 



> Produits 

- Produit 1 

- Produit 2 

- Produit 3 

- Produit 4 

- Produit 5 

> Services 

- Service 1 

- Service 2 

- Service 3 



> Home 

- Accueil 

> Produits 

- Produit 1 

- Produit 2 

> Services 

- Service 1 

- Service 2 

- Service 3 

> Archives 

- 2 0 0 6 

- 2007 

Soit notre page Html qui sert egalement de modele pour les autres pages du site (menuAjax.htm). 



<html> 
<head> 

<title>Menu dynamique AJAX</title> 
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<meta http-equiv="Content-Type" content="text/html; 
charset="iso-8859-l" /> 

<meta http-equiv="Content-Script-Type" content=" text / javascript " /> 
<meta http-equiv="Content-Script-Type" content="text/css" /> 
<link rel=" stylesheet " href ="menuAjax . ess " type="text/css"/> 
<script type="text/ javascript " src="menuAjax . js"x/script> 
</head> 

<body onload="menuA jax ( ' menuA jax . xml ' ) ; " > 

<div id="menu" style=" float : left ; width : 130px; "> 

<div id="af f ichageMenu"x/div> 

</div> 

<div id="contenu"> 
<h3>Page d' accueil</h3> 

<p> 

Contenu de la page... 

</p> 
</div> 
</body> 
</html> 



Plusieurs remarques s'imposent : 

• II n'y a pas de declaration de doctype. Cette astuce est destinee a contourner les problemes lies a 
Interpretation des feuilles de style CSS par les navigateurs de la famille Internet Explorer. 

• II y a des liens vers des fichiers JavaScript et de feuilles de style CSS externes. Ce qui allege le code de la page 
Xhtml et facilite notre etude. 



• La balise <body> appelle la fonction menuAjaxO au chargement de la page. 

• La page de depart comporte uniquement deux balises <div> dont la balise <div id="af fichageMenu"> . . . 
</div> qui contient le menu de navigation. A ce stade, elle est completement vide ainsi que la balise <div 
id="contenu"> . . . </div> qui accueille le texte de la page Web. 



0 Menu dynamique AJAX - Windows Int... fjTjfp' lfx" 



▼ | C:\Documents and 5 e * *f \ X | 



'0 Menu dynamique AJAX 



Menu de na\igation 


Page d'accueil 




Contenu de la page... 



j Poste de travail 



+ x 100% - 



Le fichier XML (menuAjax.xml) : 



<?xml version="l . 0" encoding=" iso-885 9-1 " ?> 
<menus> 

<menu texte="Home"> 

<sousmenu texte="Accueil" url="accueil . htm"x/sousmenu> 
</menu> 

<menu texte="Produit s " > 

<sousmenu texte="Produit 1" url="produitl .htm"x/sousmenu> 
<sousmenu texte="Produit 2" url="produit2 .htm"x/sousmenu> 
<sousmenu texte="Produit 3" url="produit3 .htm"x/sousmenu> 



2- 
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</menu> 

<menu texte="Services"> 

htm"x/sousmenu> 
htm"x/sousmenu> 
htm"></ sousmenu> 
htm"x/sousmenu> 
htm" ></ sousmenu> 
</menu> 
</menus> 



<sousmenu texte="Service 1" url="servicel . 

<sousmenu texte="Service 2" url="service2 . 

<sousmenu texte="Service 3" url="service3 . 

<sousmenu texte="Service 4" url="service4 . 

<sousmenu texte="Service 5" url="service5 . 



Ces balises comportent des attributs. Les items principaux (Home, Produits et Services) possedent I'attribut texte. Les 
sous-menus, outre I'attribut texte, disposent de I'attribut uri qui definit le lien correspondant. 

Pour modifier ou mettre a jour le menu de navigation, il suffit simplement de modifier ce fichier XML. 

Apres chargement et traitement de ce fichier, notre fichier menuAjax.htm prend la forme suivante : 



^ Ajax - Windows Internet Explorer 



9QQ 



(J http://localhost/menu X 



> Home 



Accueil 



> Produits 



- Prod u it 1 

- Produit 2 

- Produit 3 



> Services 



- Service 1 

- Service 2 

- Service 3 

- Service 4 

- Service 5 



Page d'accueil 

Contenu de la page. 



•j Intranet local 
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Le fichier externe de feuilles de style (menuAjax.css) 



#af f ichageMenu{ 
width: lOOpx; 

background-color: #F3F9FE; 
} 

.menuOut { 

cursor : pointer; 

color: #21536A; 

border: lpx solid; 

background-color: #EAEEEE ; 

padding: 4px; 

font -family : Verdana; 

font-size: llpx; 

border-color: #FEFEFE #C3C8CB #C3C8CB; 
margin: Opx; 
text-decoration: none; 
padding-left : 3px; 

} 

.menuOver { 

cursor: pointer; 

color: #21536A; 

border: lpx solid; 

background-color: #DDEEFF; 

padding: 4px; 

font -family : Verdana; 

font-size: llpx; 

border-color: #C3C8CB #C3C8CB #FEFEFE #C3C8CB; 
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margin: Opx; 
text-decoration: none; 
padding-left : 3px; 
} 

.menuSelected { 

cursor: pointer; 

color: #21536A; 

border: lpx solid; 

background-color: #DDEEFF; 

padding: 4px; 

font -family : Verdana; 

font-size: llpx; 

border-color: #FEFEFE #C3C8CB #C3C8CB; 
margin: Opx; 
text-decoration: none; 
padding-left : 3px; 

} 

.sousmenu { 

font -family : Verdana; 

font-size: lOpx; 

padding-top : 3px; 

padding-bottom: 4px; 

padding-left : 20px; 

border-right: lpx solid #C3C8CB; 

border-left: lpx solid #C3C8CB; 

border-bottom: lpx solid #C3C8CB; 

} 

.sousmenu a { 

color:#21536A; 

text -de cor at ion: none; 

font-family : Verdana; 

font-size: lOpx; 

} 

.sousmenu a: hover { 

color :#0OOOFF; 

text -de cor at ion: none; 

font -family : Verdana; 

font-size: lOpx; 

font-weight: bold; 

} 



Commentaires 

• Les declarartions menuOut, menuOver et menuSelected gerent la presentation des items principaux. Au survol de 
ceux-ci par la souris, un petit effet visuel (un arriere-plan de couleur differente) est mis en place comme illustre 
par la capture d'ecran suivante. 

> Home 

- Accueil 

> Produits 

- Prod u it 1 

- Produit 2 

- Produit 3 

> Services 

- Service 1 

- Service 2 

- Service 3 

- Service 4 

- Service 5 
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> Home 
-Accueil {|J 

> Produits 

- Prod u it 1 

- Produit 2 

- Produit 3 



> Services 

- Service 1 

- Service 2 

- Service 3 

- Service 4 

- Service 5 



• La declaration de style sousmenu prend en charge I'affichage des sous-menus. 



• Un petit effet au survol des elements de sous-menu est egalement prevu avec sousmenu a et sousmenu arhover. 



> Home 
- Accueil 



> Produits 

- Produit 1 

- Produit 2 

- Produit 3 



> Services 



- Service 1 

- Service 2 

- Service 3 

- Service 4 

- Service 5 



> 


Home 


- Accueil 


> 


ProdO 




- Produit 1 




- Produit 2 




- Produit 3 


> 


Services 




- Service 1 




- Service 2 




- Service 3 




- Service 4 




- Service 5 



Etudions le fichier JavaScript externe (menuAjax.js) pas a pas. 

var ie5 = (document . getElementByld && document . all ) ; 

Comme il faut tenir compte d'incompatibilites notoires entre Internet Explorer et Firfox, la variable ie5 permet de 
distinguer les navigateurs de la famille Microsoft. 

Le script doit avant tout, initier une requete HTTP compatible entre Firefox et Internet Explorer afin de rapatrier les 
donnees du fichier menuAjax.xml vers le client. 



var xhr = null; 

function menuA jax (url ) { 

if (window . XMLHttpRequest ) { 

xhr = new XMLHttpRequest () ; 

} 

else if (window . ActiveXOb ject ) { 

xhr = new Act iveXOb ject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
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} 

if(xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr . readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

setXML (xmldocument) ; } 

} 

xhr . open ( "GET" , url , true ) ; 

xhr . send (null ) ; 

} 

} 



Une fois la requete reussie, la fonction setXML() prend en charge les donnees du document XML et procede a I'affichage 
dynamique du menu de navigation. 

Cette fonction est (bien entendu) assez complexe a mettre en place. 

function setXML ( xmldocument ) { 

La fonction setXMLQ recupere le fichier XML (xmldocument) sous forme d'argument. 

var menu = xmldo cument . get E 1 ement sByTagName (' menu ') ; 

La variable menu liste I'ensemble des balises <menu> de ce document XML. 

for (var i = 0 ; i <menu . 1 engt h ; i + + ) { 

Un boucle for passe en revue les differents elements de la variable menu. 

var p = document . createElement ( ' p' ) ; 

La variable p cree un nouveau paragraphe (createElement voir chapitre Le DOM (Document Object Model) - Modifier la 
Hierarchisation) . 

var attributs=menu [ i ] .attributes; 

var txt = at t r ibut s . ge t Namedl t em ( " t ext e " ) .nodeValue; 

Le script accede aux attributs de la presente balise <menu> et extrait son contenu au moyen de I'attribut texte (voir 
chapitre Le DOM - Acceder aux attributs et chapitre L'approche AJAX - Recuperer et traiter du XML). 

p . appendChild (document . createTextNode ( "> " + txt)); 

Le script cree un nceud texte (createTextNode voir chapitre Le DOM (Document Objet Model - Modifier la Hierarchisation - 
La methode createTextNode), avec en parametre le texte identifie a la ligne de code precedente (variable txt) et ajoute 
comme dernier element a la variable p. 

if ( ie5 ) {p . style . cssText= 'width: 100%;';} 

Cette ligne corrige un bug d'Internet Explorer et force I'element a prendre tout I'espace disponible dans I'element 
determine. 

ie5 ? p . set At t r ibut e ( " c la s sName " , "menuSelected" ) : 
p. set At tribute ("class", "menuSelected") ; 

La methode setAttribute o permet d'ajouter ou de modifier a un element, un attribut et sa valeur. La syntaxe en est 

setAtt r ibute ( " attribut " , "valeur " ) . 

Comme la gestion en JavaScript des styles est differente avec Internet Explorer et Firefox, la notation className est 
utilisee pour Internet Explorer et la notation class est utilisee pour Firefox. L'attribut prend la valeur menuSelected. 

do cume n t .getElementByldt'aff i chageMe nu ' ) . appendChild (p) ; 

Apres avoir accede a I'identifiant de la balise <div> consacree a I'affichage du menu (af fichageMenu) dans le document 
Xhtml, I'element p lui est ajoute comme dernier element enfant (appendChild). 

p . setAttribute (" id" , "menu" + i); 
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Un attribut id ayant pour valeur "menu" + i (ieme iteration) est affecte a I'element p. 

ie5 ? p . set At t r ibut e ( " c la s sName " , "menuOut") : p. setAttribute ("class", 
"menuOut " ) ; 

L'attribut className ou class est modifie pour lui donner la valeur menuOut. 

p.onmouseover = new Function ("changerClasse ('menu" + i + me nuO ve r ');"); 

p.onmouseout = new Function ("changerClasse ('menu" + i + "', 'menuOut');"); 

La declaration de style menuOver est associee a I'evenement onmouseover par la fonction changerClasse o (voir plus bas 
dans le script). La declaration de style menuOut reprend la main a I'evenement onmouseout. 

La partie consacree a la construction de I'item dans le menu de navigation est maintenant terminee. Le script passe 
maintenant a I'elaboration des sous-menus. 

var d = document . createElement ( ' div' ) ; 

La variable d cree (createElement voir chapitre Le DOM (Document Object Model) - Modifier la Hierarchisation) une 
nouvelle division (balise <div>). 

d . setAttribute (" id" , "sub" + i); 

Un attribut id avec comme valeur subi lui est affecte par la methode setAttribute ( ) , 

ie5 ? d. setAttribute ( "className", "sousmenu") : d. setAttribute ("class" , 
" s ou smenu " ) ; 

La declaration de style sousmenu lui est affectee (voir fichier de style externe menuAjax.css). 

d. style. cssText = 'display:block;'; 

La division ainsi creee, est affichee par la propriete CSS de style display. 

do cumen t . getElementByld Caff i chageMe nu ' ) .appendChild(d) ; 

Et la division est jointe comme dernier enfant au menu de navigation en construction. 

var sousMenu = menu [i] . ge t E 1 ement s By TagName (' sousmenu' ) ; 

La variable sousMenu liste par item, les differentes balises <sousmenu> (voir le fichier menuAjax.xml). 

for (var j=0; j<sous Menu. length; j++){ 

Une boucle fortraite alors en revue, un par un, les differents elements de la variable sousMenu. 

var a = document . createElement (' a' ) ; 

Une balise de lien (createElement) est creee. 

var attributs= sousMenu! j] .attributes; 

var Url = at t r ibut s . ge t Namedl t em ( " ur 1 " ) .nodeValue; 

L'attribut url est recherche parmi les attributs de la balise <sousmenu> et sa valeur est deduite. 

a. href = Url; 

Cette valeur constitue le lien (href) attache a I'element a. 

var txt = at t r ibut s . get Namedl t em (" t ext e " ) . nodeValue; 

L'attribut texte est cherche parmi les attributs de la balise <sousmenu> et sa valeur est reprise. 

var spn = document. createEl ement ( ' span ' ) ; 
a.appendChild(spn) ; 
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Une balise <span> (variable spn) est creee : elle est jointe comme dernier enfant a I'element a. 

spn. appendChild (document . createTextNode ( " + txt) ) ; 

Un noeud texte est cree prenant pour valeur la variable txt : il est joint a I'element spn. 

d . appendChi Id ( a ) ; 

Le tout est ajoute comme dernier enfant a la variable d (pour rappel, les divisions du sous-menu). 

var b = document . createElement (' br ') ; 

d . appendChi Id (b ) ; 

} 

) 

} 

Une balise <br> (createElement) est creee et ajoutee a I'element d, ce qui permettra au sous-menu suivant de s'afficher 
sur une nouvelle ligne. 

function change rC 1 a s s e ( menu , newClass) { 
if ( document . get E 1 erne nt By I d ) { 

do cume n t . ge t E lement By I d ( menu ) .className = newClass; 

} 

} 

Le fichier JavaScript menuAjax.js complet : 



var ie5 = (document . getElementByld && document . all ) ; 
function setXML (xmldocument ) { 

var menu = xmldocument . getElementsByTagName (' menu' ) ; 
for (var i=0 ; i<menu . length; i++) { 
var p = document . createElement (' p' ) ; 
var attributs=menu [ i ] .attributes; 

var txt = attributs . getNamedltem ( "texte" ). nodeValue; 
p . appendChild (document . createTextNode (" > " + txt)); 
if (ie5) {p.style.cssText= 'width: 100%;';} 

ie5?p . set Attribute ( "className" , "menuSelected" ) : p . set At tribute ( "class " , 
"menuSelected" ) ; document . getElementByld ( ' af f ichageMenu' ) . appendChild (p) ; 
p.setAttribute ("id", "menu" + i); 

ie5?p . set Attribute ( "className" , "menuOut " ) : p . set At tribute ( "class " , "menuOut " ) ; 
p . onmouseover = new Function (" changerClasse (' menu" + i + " ' , ' menuOver' ) ; " ) ; 
p.onmouseout = new Function ( "changerClasse (' menu" + i + "',' menuOut ');") ; 
var d = document . createElement (' div' ) ; 
d. setAttribute ("id", "sub" + i) ; 

ie5?d . setAttribute ( "className" , "sousmenu" ) : d. setAttribute ( "class " , "sousmenu" ) ; 
d. style . cssText = ' display :block; ' ; 

document . getElementByld ( ' aff ichageMenu' ) . appendChild (d) ; 

var sousMenu = menu[i] . getElementsByTagName (' sousmenu' ) ; 

for (var j=0 ; j <sousMenu . length; j ++) { 

var a = document . createElement (' a' ) ; 

var attributs= sousMenu [ j ]. attributes; 

var Url = attributs . getNamedltem ( "url" ) .nodeValue; 

a. href = Url; 

var txt = attributs . getNamedltem ( "texte" ) .nodeValue; 
var spn = document . createElement (' span' ) ; 
a . appendChild (spn) ; 

spn . appendChild (document . createTextNode ( "- " + txt)); 
d. appendChild (a) ; 

var b = document . createElement (' br' ) ; 

d. appendChild (b) ; 

} 

> 

} 

var xhr = null; 
function menuA j ax (ur 1 ) { 
if (window. XMLHttpRequest ) { 
xhr = new XMLHttpRequest () ; 
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} 

else if (window . Act iveXObject ) { 

xhr = new Act iveXObject ( "Microsoft . XMLHTTP ") ; 
} 

else { 

alert ("Votre navigateur n'est pas compatible avec AJAX..."); 
} 

if (xhr) { 

xhr . onreadystatechange = function (){ 

if (xhr.readyState == 4 && xhr. status == 200) { 

var xmldocument = xhr . responseXML; 

setXML (xmldocument) ; } 

} 

xhr . open ( "GET" , url , true ) ; 

xhr . send (null ) ; 

} 

} 

function changerClasse (menu, newClass) { 
if (document . getElementByld) { 

document . getElementByld (menu) .className = newClass; 

} 

} 



^ Ce script est compatible entre Internet Explorer et Firefox. 
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Mots reserves JavaScript 



abstract 


final 


protected 


boolean 


finally 


public 


break 


float 


return 


byte 


for 


short 


case 


function 


static 


catch 


goto 


super 


char 


if 


switch 


class 


implements 


synchronized 


continue 


import 


this 


const 


in 


throw 


debugger 


instanceOf 


throws 


default 


int 


transient 


delete 


interface 


true 


do 


label 


try 


double 


long 


typeof 


else 


native 


var 


pvfpn H c 
CALCI 1 U is 


n 6w 


vniH 

VUIU 


enum 


null 


volatile 


export 


package 


while 


false 


private 


with 



Outre les mots reserves enumeres ci-dessus, il est preferable d'eviter les mots suivants dans les noms de variables. Ces 
norms sont utilises pour les objets, methodes ou proprietes par le langage JavaScript. 



© ENI Editions - All rigths reserved 



- 1- 





fileUpload 


Math 




alert 




plugin 




focus 


mimeTypes 


all 


form 




prompt 




name 




anchor 






prototype 




forms 


navigate 




anchors 




radio 




frame 


navigator 




area 






reset 




frames 


netscape 




array 




screenX 


frameRate 


Number 




assign 






screenY 


function 


Object 




blur 




scroll 




getClass 


offscreen 




button 






secure 




hidden 


onblur 




checkbox 






select 




history 


onerror 




clearTimeout 




self 




image 


onfocus 




clientlnformationclose 




setTimeout 




images 


onload 




closed 




status 




isNaN 


onunload 




confirm 






String 




java 


open 




crypto 






submit 




JavaArray 


opener 




date 






sun 




JavaClass 


option 




defaultStatus 




taint 




JavaObject 


outerHeight 




document 






text 




JavaPackage 


outerWidth 




element 




textarea 




innerHeight 


packages 




elements 




top 




innerWidth 


pageXOrfset 


embed 






toString 


embeds 


layer 


pageYOffset 






unescape 




layers 


parent 


escape 






untaint 


length 


parseFloat 




eval 






valueOf 




link 


parselnt 




event 




window 




location 


password 
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